chrome 扩展基础

mainfest.json

20220428103647

manifest.json是唯一一个在每个扩展里面必须存在的文件。它包含了关于这个扩展插件基本的元数据（metadata），比如它的名字、版本和所需权限。并且，它也对扩展中其他文件进行了链接。

下面是一个示例:

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

扩展中的组件

扩展由不同但具有内聚性的组件组成。组件可以包括 后台脚本、内容脚本、 选项页面、UI元素和各种逻辑文件。

关于后台脚本、内容脚本等详细介绍，请查看链接 developer.chrome.com/docs/extens… 我这里只介绍一下需要注意的地方：在后台脚本、内容脚本中javascript的访问权限和生命周期。

内容脚本：

生命周期: 生命周期短，随着被注入web page的关闭而结束。
访问权限: 可以访问web page的dom, 但是不能访问web page的window定义的变量; 不能使用chrome.* API。

后台脚本：

生命周期: 生命周期长，后台脚本将在扩展加载完毕后开始运行，直到扩展被禁用或卸载。
访问权限: 可以使用 chrome.* API; 不能访问web page的dom

权限

只有声明了相应的权限，在扩展中才能使用相应的 chrome. API*。比如声明了storage权限，才能使用chrome.storage.* 相关API。

在mainfest.json中有三个key和权限相关:

permissions：指定一个权限列表。
optional_permissions：和permissions一样, 但是由扩展的用户在运行时授权，而不是提前授权。
host_permissions：包含一个或多个匹配模式，host满足匹配模式才有权限。

示例:

{
  "permissions": [
    "tabs",
    "bookmarks",
    "unlimitedStorage"
  ],
  "optional_permissions": [
    "unlimitedStorage"
  ],
  "host_permissions": [
    "http://www.blogger.com/",
    "http://*.google.com/"
  ],
}

匹配模式(match patterns)

一组URL的集合，匹配模式本质上是一个URL，它以(http、https、file或ftp)开始，可以包含'*'字符。特别的, <all_urls>表示匹配任意URL。匹配模式有三个部分:

schema: 比如http 、 file 或 *
host: 比如www.google.com 或 *.google.com 或 *; 如果schema为file, 则没有host部分。
path: 比如/*, /foo*, 或者 /foo/bar

chrome Devtools 扩展

概览

chrome Devtools 扩展也是chrome 扩展，只是它是扩展Devtools功能的; 我们可以做很多事情，比如：在Devtools中添加Panel和SiderBar, 和被检查的web page交互, 获取网络请求信息。

在chrome Devtools 扩展中，我们可以使用DevTools API:

devtools.inspectedWindow
devtools.network
devtools.panels

DevTools扩展的结构和其他扩展一样: 它可以有背景页面、内容脚本和其他项目。此外，每个DevTools扩展都有一个DevTools页面，可以访问DevTools API。

20220428101858

DevTools页面

每次打开DevTools窗口时，都会创建一个扩展的DevTools页面实例。在DevTools页面中，可以访问DevTools API和部分chrome.* API。具体来说，DevTools页面可以:

使用devtools.panelsAPI创建Panel并与之交互。
使用devtools.inspectedWindowAPI获取关于被检查窗口的信息，还可以在被检查窗口中执行代码。
使用devtools.networkAPI获取网络请求信息。

DevTools页面不能使用大部分的chrome.* API。和内容脚本 一样, 只能访问chrome.extension和chrome.runtime。和content script 一样, 也是通过Message Passing和后台脚本通信。

创建一个`DevTools 扩展`

{
  "name": ...
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "devtools_page": "devtools.html",
  ...
}

devtools_page是必须的，指定DevTools页面，其他的包括内容脚本和后台脚本都是可选的。

然后在DevTools页面我们就可以来创建Panel和SiderBar页面了。

创建`Panel`页面

devtools.html:

chrome.devtools.panels.create("My Panel",
  "MyPanelIcon.png",
  "Panel.html",
  function(panel) {
    // code invoked on panel creation
  }
);

和其他扩展组件通信

在chrome 扩展中，不同组件间是通过Message Channel来通信的。

需要注意的是: 对于DevTools 扩展，内容脚本不能直接与DevTools page 通信，需要通过后台脚本做转发。

Message Channel

Message Channel就向是一个管道，有两个端点port1和port2, port1可以给port2发消息，反之亦然, 消息就好像在管道中传递一样。

DevTools Page和后台脚本通信

devtool-page.html:

// 创建链接, 其实就是创建Message Channel
// chrome.runtime可以看成是后台脚本
const port1 = chrome.runtime.connect({
  name: "devtools-page"
})

port1.postMessage('我是devtools-page')

background.js:

function handleMessageFromDevToolsPage(message, sender, sendResponse) {
  console.log('来自devtools-page的消息', message)
}
// 处理链接请求，接收到channel的另一端: port2
chrome.runtime.onConnect.addListener(function (port2) {
  if(port.name === 'devtools-page') {
    console.log('来自devtools-page的连接')
    port2.onMessage.addListener(handleMessageFromDevToolsPage)
  }
  ...
})

chrome Devtools 扩展开发