开发一个Edge 拓展插件

步骤 1：创建 manifest.json 文件
步骤 2：添加图标
步骤 3：创建 html 和代码，开发拓展交互窗口或后台服务或注入脚本

创建manifest.json

这个文件用于声明插件项目的相关信息，不用多说，本插件使用的内容格式如下：

{
  "manifest_version": 3,
  "name": "文档助手",
  "version": "0.1",
  "description": "desc docs",
  "icons": {//指定拓展插件的icon
    "16": "icons/icon48.png",
    "32": "icons/icon48.png",
    "48": "icons/icon48.png",
    "64": "icons/icon72.png",
    "128": "icons/icon144.png"
  },
  "run_at": "document_idle",
  "action": {//指定拓展插件的交互页面
    "default_popup": "html/menu.html"
  },
  "permissions": ["storage", "tabs"],//指定拓展程序需要浏览器哪些权限
  "background": {
    "service_worker": "js/server.js"//指定拓展程序后台服务的js，会在安装后在后台运行
  },
  "content_scripts": [//匹配注入特定网页的规则与脚本地址，可以在网页加载完成后获取网页上下文执行脚本
    {
      "matches": ["https://xxx.com/*"],
      "js": ["js/inject.js"]
    },
    {
      "matches": ["https://xxx.com/i/#/docs/*"],
      "js": ["js/inject-path.js"]
    }
  ]
}

通信

拓展插件也是一个 html 小项目，拓展插件-服务脚本-目标页面，可以按照这样的方式分为三端，在项目里开发三个js脚本，三者通过监听事件的方式通信，这样进行调用。
在需要和指定页面通信时，需要获取目标页面的 tabId，规范写法如下

注意，这里 query 传入的回调是 function 函数，不能传入箭头函数，否则获取不到 tabs(这个坑了好久)，另外 background 脚本好像也无法获取 tabs 信息。

function getTargetTabId(callback) {
  console.log("getTargetTabId");
  chrome.tabs.query({ currentWindow: true }, function (tabs) {
    console.log("getTargetTabId", tabs);
    for (var i = 0; i < tabs.length; i++) {
      console.log("tabs", i, tabs[i]);
      if (tabs[i].url && tabs[i].url.startsWith("https://xxx.com/")) {
        callback && callback(tabs[i]);
        return;
      }
    }
  });
}

发送通信数据，如果发送给指定 tab 网页，则需要 tab 的 id,tab id获取方式如上。

chrome.tabs.sendMessage(
  request.tab.id,
  {
    cmd: "getToken",
  },
  function (response) {
    console.log("server get response", response);
    sendResponse(response);
  }
);

添加监听
适用于监听来自其他端（拓展程序，后台服务脚本，目标网页植入的脚本）发来的消息。
注意，这里如果无法立即执行 sendResponse，则需要 return true，否则报错

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab ? "from a content script:" : "from the extension",
    request.cmd
  );
  if (request.cmd == "getToken") {
    console.log("[server]sendMessage to tab:", request.tab.id);
    chrome.tabs.sendMessage(
      request.tab.id,
      {
        cmd: "getToken",
      },
      function (response) {
        console.log("server get response", response);
        sendResponse(response);
      }
    );
  }
  return true;
});

content_scripts

注入网页的脚本可以使用网页上下文环境，包括获取document，获取localStorage等等。

其他信息参考官方说明：

https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/developer-guide/devtools-extension

https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts?tabs=v3

https://www.perplexity.ai/search/137e0395-1709-40c5-a94e-1f4cb05c18af?s=u