谷歌插件开发 – 重要概念

注册 background.js

它是一种后台脚本，浏览器会在插件安装或重新加载时扫描它并初始化(事件的监听等)。它是整个插件的重要组成部分。必须在manifest里配置。

{
"name": "CE-Demo",
  "description": "I am a demo",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "persistent": true
  }
}

★

persistent属性定义了插件常驻后台的方式；当其值为true时，表示插件将一直在后台运行，无论其是否正在工作；当其值为false时，表示插件在后台按需运行，这就是Chrome后来提出的Event Page（非持久性后台）。 Event Page是基于事件驱动运行的，只有在事件发生的时候才可以访问；这样做的目的是为了能够有效减小插件对内存的消耗，如非必要，请将persistent设置为false。 persistent属性的默认值为true

同时在插件目录添加background.js文件，包含以下代码：

当脚本安装成功的时候，就会执行下面这个事件

chrome.runtime.onInstalled.addListener(() => {
  console.log('后台脚本运行成功！')
});

添加popup弹框页面

★

[!TIP] popup如果要写js逻辑的话，必须要采用新建js，然后引入的方式来写！！！

popup页面是你点击工具栏的图标的时候，展示的弹窗。

我们需要覆盖默认的popup界面，修改manifest:

{
  ...
  "action": {
    "default_popup": "popup.html"
  },
  ...
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 200px;height: 100px">
        我是popup弹窗
    </div>
</body>
</html>

内容脚本 Content Scripts

插件提供了内容脚本 Content Scripts（CS）的概念，当用户打开并访问某个网站时，浏览器将CS注入网站的文档里执行。

因此，我们需在CS脚本里编写记录的逻辑。

往manifest里添加CS:

{
    // 在此处使用数组往页面中引入JS或者CSS。
    "content_scripts":
    [
        {
            // 当matches返回true时才会注入
            // 比如 ["http://foo.com/bar/*", "https://foobar.com/bar/*"]
            // 表示在foobar.com下的bar路径下会发生注入
            // 一个特殊的值： "<all_urls>" 表示匹配所有地址   *://*/* 也是同样的效果
            "matches": ["<all_urls>"],
            // 多个JS会按照配置的顺序引入到页面
            "js": ["content/index.js", "content/index2.js"],
            // 多个CSS会按照配置的顺序引入到页面
            "css": ["foo/bar.css"],
            // 在什么时机引入到页面， 默认document_idle。 三个可选择的值： "document_start"、"document_end"、"document_idle"
            "run_at": "document_idle",
            // 是否运行在页面所有的frame中
            "all_frames": true
        },
        {
            // 因为是数组，所以可以配置多项
        }
    ],
}