开发浏览器插件（chrome、edge）

开发浏览器插件是一个有趣且富有挑战性的项目，可以让你扩展浏览器的功能，提升用户的浏览体验。今天就带大家写一个最简单的下载页面图片的插件。

因为chrome 和edge 使用相同内核，所以开发一款插件，2个浏览器都能用

准备工作

chrome -  要求最新版

idea -  为什么使用idea，当然是因为代码高亮方便开发

开发

新建项目

file->new->project

选择Empty Project ，Name填写chrome-image-downloader，点击Create

代码

项目目录

/chrome-image-downloader
|-- manifest.json
|-- /src
|   |-- background.js
|   |-- popup.js
|   |-- popup.html
|   |-- popup.css
|-- /icons
|   |-- icon.png

这里的.idea 和 .iml后缀文件是idea自带的配置文件，不用管

manifest.json

{
  "manifest_version": 3,
  "name": "图片下载器",
  "version": "1.0",
  "description": "下载当前网页的图片",
  "permissions": [
    "activeTab",
    "downloads",
    "scripting"
  ],
  "background": {
    "service_worker": "src/background.js"
  },
  "action": {
    "default_popup": "src/popup.html",
    "default_icon": "icons/icon.png"
  }
}

1. manifest_version: 指定清单文件的版本。Chrome 扩展程序的当前最新版本是 3。

• 用途: 根据不同版本，Chrome 扩展的功能和要求可能会有所不同。使用最新版本可以确保最佳的兼容性和安全性。

2. name: 插件的名称。

• 用途: 这是用户在 Chrome 网上应用店和扩展管理页面中看到的名称。

3. version: 插件的版本号。

• 用途: 用于跟踪插件的版本更新，通常遵循“主版本.次版本.修订”的格式。

4. description: 插件的简短描述。

• 用途: 向用户说明插件的功能和用途，帮助他们理解这个插件的价值。

5. permissions: 插件需要的权限列表。

• activeTab: 允许插件访问当前活动标签页的内容，这对于下载网页中的图片是必要的。

• downloads: 允许插件使用 Chrome 的下载 API，以便将图片下载到用户的计算机。

• scripting: 允许插件编写脚本以操作网页内容，适合执行诸如获取图片等操作。

6. background: 定义后台服务工作者（Service Worker）的设置。

• service_worker: 指向后台脚本文件 src/background.js，用于处理插件的后台任务，如响应事件、管理状态等。

7. actio: 定义浏览器工具栏图标的行为和外观。

• default_popup: 指向弹出页面的 HTML 文件