Chrome拓展开发入门

1、核心介绍：manifest.json

{
  "manifest_version": 3, // 定义插件版本（非版本号），最新为V3。Chrome 应用商店已经停止接受新的 Manifest V2插件。
  "name": "modify-page",
  "version": "1.0",
  "action": {                         // 点击图标弹出框，对于弹出框接受的是html文件
    "default_icon": "asserts/open-source.png",
    "default_popup": "src/popup.html"
  },
  "content_scripts": [      // 在网页上下文中运行的文件。和原始页面共享 DOM，但是不能共享 JS，不能访问页面中的 JS.
    {
      "matches": ["https://clouddevops.huawei.com/*", "https://codehub-g.huawei.com/*"],
      "js": ["src/wiki/add-link.js", "src/wiki/add-data.js", "src/codeHub/custom-title.js", "src/codeHub/enter-commit.js"]
    }
  ],
  "web_accessible_resources": [  // 声明扩展里可以被外部 Web 页面或其他扩展访问的资源
    { 
      "resources": ["src/codeHub/get-commit-list.js"],
      "matches": ["https://*/*"]
    }
  ],
  "background": {      // 插件安装后一直在后台运行，即使没有打开插件的弹出式窗口或活动标签页。随浏览器打开和关闭。
      "service_worker": "src/background.js"
  }
  "permissions": ["activeTab", "contextMenus"]
}

2、popup

1. popup是点击browser_action或者page_action图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。
2. popup内容在manifest.json中使用action配置。
3. popup的作用域与浏览器窗口页面的作用域是隔离的，popup脚本无法访问窗口页面的js、dom。
4. 要实现窗口页面交互，需要用到content_scripts。

3、content_scripts

1. 向页面中注入的脚本，在脚本中使用console.log，会直接在页面的控制台打印。
2. 和原始页面共享 DOM，但是不能共享 JS，不能访问页面中的 JS。
3. 可以和popup进行通信交互，popup无法操作页面dom，但是可以向content_script发送消息，从而在content_script中操作页面dom。
4. 同理，也可以使用script标签向页面中注入脚本文件，注入的脚本文件可以访问页面中的JS，content_scripts也可以与该注入的脚本之间通信交互。

4、web_accessible_resources

1. 为了安全，页面是不允许content_scripts的。
2. 所以需要在manifest.json中使用web_accessible_re随意注入脚本sources声明允许被注入的资源。

5、background

1. 由于单击图标打开popup，焦点离开又立即关闭，所以popup页面的生命周期一般很短。
2. background是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
3. Background可以和content_scripts、popup通信交互

6、通信

1. chrome 插件的脚本权限差异：

JS	Chrome API	访问页面DOM	访问页面js	直接跨域
content_scripts	不能访问Chrome API	允许	不允许	不允许
popup	大部分API	不允许	不允许	允许
background	大部分API	不允许	不允许	允许
web_accessible_resources	runtime、extension等部分API	允许	允许	不允许

要实现一个功能往往需要多个模块协作

2. 通信抽象图

3.通信方式

发送方 接收方	content_scripts	popup	background	web_accessible_resources
content_scripts	--	chrome.runtime.sendMessagechrome.runtime.onMessage	chrome.runtime.sendMessagechrome.runtime.onMessage	window.addEventListenerwindow.postMessage
popup	chrome.tabs.connect()->postMessagechrome.runtime.onConnect()->onMessage	--	chrome.extension.getView()	--
background	chrome.tabs.connect()->postMessagechrome.runtime.onConnect()->onMessage	chrome.extension.getBackgroundPage()	--	--
web_accessible_resources	window.addEventListenerwindow.postMessage	--	--	--