关于 chrome 插件的一些知识点：

manifest.json 文件

这个是写 chrome 插件的主要方法 就是需要这个配置文件 是一个入口

{
  "name": "test-cookie-check",
  "version": "1.0",
  "description": "联调cookie检测",
  "manifest_version": 2,
  // 前面这几个主要是插件的一些信息描述
  "permissions": ["declarativeContent", "activeTab"],
  //permissions 是当我们使用chrome上的某一写功能是需要在这里开启权限 background文件中使用了declarativeContent 并且添加了一些规则 这些规则需要和 activeTab 一起使用 所以也要开启 activeTab权限
  "background": {
  // 扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态 background-背景页
  // 背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，同时，在同一时间只有一个实例处于活动状态。
  // 在一个有背景页的典型扩展中，用户界面（比如，浏览器行为或者页面行为和任何选项页）是由沉默视图实现的。当视图需要一些状态，它从背景页获取该   状态。当背景页发现了状态改变，它会通知视图进行更新。
  // 背景页一般不需要html 只需要在scripts中添加js文件即可
  // 需要背景页可以添加page字段: eg: page:"background.html"
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "assets/logo.png",
      "32": "assets/logo.png",
      "48": "assets/logo.png",
      "128": "assets/logo.png"
    }
  },
  "icons": {
    "16": "assets/logo.png",
    "32": "assets/logo.png",
    "48": "assets/logo.png",
    "128": "assets/logo.png"
  }
}

• chrome 插件：

Chrome 浏览器扩展的架构：不可视的 background 页面、可视页面、Google Chrome 扩展与 Web 页面/服务器之间的交互、使用 chrome.* API、 Google Chrome 扩展中的页面之间的数据通信

• browser actions 这样的 Google Chrome 扩展可以适用于任何页面。图标往往位于浏览器地址栏外右侧。点击图标将弹出窗口。

• page actions，这样的 Google Chrome 扩展只能作用于某一页面，当打开该页面时触发该 Google Chrome 扩展，关闭页面则 Google Chrome 扩展也随之消失。图标往往位于浏览器地址栏内右端。

• 关于 background 字段的配置说明：

在 Manifest 中指定 background 域可以使扩展常驻后台。 background 可以包含三种属性，分别是 scripts、page 和 persistent。

如果指定了 scripts 属性，则 Chrome 会在扩展启动时自动创建一个包含所有指定脚本的页面；如果指定了 page 属性，则 Chrome 会将指定的 HTML 文件作为后台页面运行。通常我们只需要使用 scripts 属性即可，除非在后台页面中需要构建特殊的 HTML——但一般情况下后台页面的 HTML 我们是看不到的。persistent 属性定义了常驻后台的方式——当其值为 true 时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为 false 时，表示扩展在后台按需运行，这就是 Chrome 后来提出的 Event Page。Event Page 可以有效减小扩展对内存的消耗，如非必要，请将 persistent 设置为 false。persistent 的默认值为 true 也就是我们在 background.js 中添加的一些规则 就是为了在满足这些规则的时候才运行扩展

• 关于 page_action 字段的说明：

Page Action 类型的 Google Chrome 浏览器扩展程序，通常也会有一个图标，但这个图标位于 Chrome 浏览器的地址栏内右端。而且这个图标并非始终出现，而是当某指定的页面打开时才会出现。也就是说，这个图标与当前打开的页面有关，只有打开了指定的页面才会显示该图标，对该页面执行对应的操作

如果定义 pageAction 类型的插件 需要在 manifest 文件进行以下配置：

{
  ...
        "page_action": {
          "default_icon": {                    // optional
            "19": "images/icon19.png",           // optional
            "38": "images/icon38.png"            // optional
          },
          "default_title": "Google Mail",      // optional; shown in tooltip
          "default_popup": "popup.html"        // optional
        },
        ...
      }

这个其实就是在我们点击拓展程序的按钮是所弹出来的内容 popup.html 这个就是弹窗的 html 页面 可以在这个页面中引入 js 代码 js 代码中则用于实现我们插件的功能：

popup.js 文件

function autoAssignSubTasks() {
  const code = `(${function() {
    function hasCookie(sKey) {
      return new RegExp(
        "(?:^|;\\s*)" +
          encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") +
          "\\s*\\="
      ).test(document.cookie);
    }
    const checkTime = 10 * 1000;
    const toast = message => {
      const dom = document.createElement("div");
      const toast = document.createElement("span");
      toast.innerHTML = message;
      dom.appendChild(toast);

      dom.style.position = "fixed";
      dom.style.left = "6px";
      dom.style.top = "6px";
      dom.style.display = "flex";
      dom.style.justifyContent = "center";
      dom.style.alignItems = "center";
      dom.style.zIndex = "9999";

      toast.style.minWidth = "250px";
      toast.style.padding = "10px";
      toast.style.fontSize = "12px";
      toast.style.fontWeight = "bolder";
      toast.style.color = "#0c5460";
      toast.style.backgroundColor = "rgba(209, 236, 241, 0.8)";
      toast.style.borderRadius = "10px";

      document.body.appendChild(dom);
      const destroy = () => document.body.removeChild(dom);
      return destroy;
    };
    let destroyToast;
    setInterval(() => {
      if (hasCookie("local_debug_ip")) {
        destroyToast = toast("请记得在联调完毕后删除 local_debug_ip cookie");
      } else {
        if (destroyToast) {
          destroyToast();
          destroyToast = undefined;
        }
      }
    }, checkTime);
  }})()`;

  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id, {
      code
    });
  });
}

autoAssignSubTasks();

• chrome.tabs:

使用 chrome.tabs API 与浏览器的标签页系统交互。
您不需要在扩展程序的清单文件中声明任何权限就能使用 chrome.tabs 的大多数方法和事件。然而，如果您需要访问 Tab 的 url、title 或 favIconUrl 属性，您必须在清单文件中声明 "tabs" 权限 所以才在我们的文件中没有定义

1. 关于标签页的几个属性：

• active ( boolean )
  标签页是否是窗口中的活动标签页。（窗口不一定有焦点。）

• id ( integer )
  标签页的标识符。标签页的标识符在浏览器会话中唯一。

• index ( integer )
  标签页在所在窗口中的索引，从 0 开始。

2. 标签页的方法：

• query

chrome.tabs.query(object queryInfo, function callback)

获取具有指定属性的所有标签页，如果没有指定任何属性的话则获取所有标签页。

queryInfo 可以传递任意标签页属性来进行标签页的选取

回调函数的参数就是标签对象

• executeScript

chrome.tabs.executeScript(integer tabId, InjectDetails details, function callback)

该标签页需要运行的代码：

details 是一个对象 有一个 code 属性 值为字符串 也就是需要执行的 js 代码的字符串

background.js 文件

"use strict";

const host = ".xxx.com";

chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {

    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: host }
          })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
      }
    ]);

});
});

• declarativeContent

声明式内容 API 允许您根据网页的 URL 和它的内容匹配的 CSS 选择器来显示您的扩展程序的页面按钮，而不需要拥有主机权限或插入内容脚本。为了在用户单击您的页面按钮后能够与网页交互，请使用 activeTab 权限。

作为一种声明式 API，该 API 让您在 onPageChanged 事件对象上注册规则，当一系列由 PageStateMatcher 表示的条件满足时执行某个操作（目前只有 ShowPageAction）

eg:
当且仅当列出的所有条件都满足时，PageStateMatcher 才会匹配网页。当 https://www.google.com/ 上的页面存在密码字段时，以下规则将为该页面显示页面按钮 也就是扩展程序的按钮

var rule1 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
    pageUrl: { hostEquals: 'www.google.com', schemes: ['https'] },
    css: ["input[type='password']"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowPageAction() ]
};

添加多个规则：
eg:
如果要为包含视频的网站显示页面按钮，您可以添加第二个条件，每一个条件都足以触发所有指定的操作：

var rule2 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
    pageUrl: { hostEquals: 'www.google.com', schemes: ['https'] },
    css: ["input[type='password']"]
    }),
    new chrome.declarativeContent.PageStateMatcher({
    css: ["video"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowPageAction() ]
};

添加的规则在浏览器重新启动后也将保留，所以请按照下面的方式注册它们

chrome.runtime.onInstalled.addListener(function(details) {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
  chrome.declarativeContent.onPageChanged.addRules([rule2]);
  });
});

也就是我代码里写的那种方式
您一定要批量注册或取消注册规则，而不是一个一个地进行，因为每一次这样的操作都会重新创建内部的数据结构，这一重新创建的过程需要大量的计算，但是利用了一种更快的匹配算法。

• 对于 url 的匹配 可以使用 pageUrl:{hostEquals/urlContains} 前者的 url 需要完全一致 后者只需要包含就可以了

• 对于 pageUrl 的匹配规则可以看这里 UrlFilter

• ShowPageAction

声明式事件操作，当相应的条件满足时显示扩展程序的 页面按钮。使用该操作不需要主机权限，但是扩展程序必须要有页面按钮。如果扩展程序拥有 activeTab 权限，单击页面按钮就会授予对活动标签页的访问权限。