# 学习如何开发一个Chrome浏览器插件（Chrome extension 谷歌浏览器扩展）

扩展由不同但是紧密的组件组成。组件可以包括背景脚本，内容脚本，选项页面，UI元素和各种逻辑文件。扩展组件是使用web开发技术创建的：HTML/CSS/Js。扩展的组件将取决于其功能，并且可能不需要每个选项。

# 插件根目录下必须有manifest.json文件

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3
  // 以上为必须配置，分别表示插件名称，描述，版本，manifest版本（2/3）
  "background: {
    "service_worker": "background.js"  // service_worker扩展管理页里后台入口的名称
  },
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "assets/icons/shopee.png",
    "32": "assets/icons/shopee.png",
    "64": "assets/icons/shopee.png",
    "128": "assets/icons/shopee.png"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

TIP

后台脚本background必须在清单中注册。
大多数API包括存储API必须在这份清单的permissions下注册，插件才能使用它们。

这个扩展一旦安装就需要来自长久变量的信息。所以注册权限后在后台脚本中可以利用runtime.onInstalled监听事件。在onInstalled侦听器内部，插件将使用存储storage来设置一个值。

let color = "#3aa757';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
})

1
2
3
4
5

扩展可以有多种形式的用户界面，这个扩展将使用一个弹出窗口。创建并添加一个名为popup的文件到扩展目录注册清单中。
工具栏图标的指定也包含在action字段下的default_icons字段中。
扩展还会在扩展管理页面上显示图像，权限警告和图标。
popup.js界面脚本就可以拿到后台脚本定义的颜色变量

let changeColor = document.getElementById("changeColor");
chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
})

1
2
3
4

← 前端路由