开发一个Edge 拓展插件
2023-08-20 本文已影响0人
jiaming_
步骤 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://www.perplexity.ai/search/137e0395-1709-40c5-a94e-1f4cb05c18af?s=u
