使用 Manifest V3 做一个 Chrome 页面右键菜单搜索扩展
介绍
如果做一些简单的功能，油猴脚本就可以做到；要做一些复杂的带有界面的功能，就需要 Chrome 扩展来做了。
Chrome 扩展是基于 HTML、JavaScript 和 CSS 等 Web 技术构建的，在单独的沙盒执行环境中运行，并与 Chrome 浏览器交互。
Chrome 浏览器可以自定义地址栏搜索引擎，但是切换比较麻烦，如果有一个方便切换搜索引擎的扩展，就很方便我们搜索我们想要的东西了。下面介绍一下，如何做一个 Chrome 右键菜单搜索扩展。
因为 manifest_version2 会提示过时，所以本例使用的是 manifest_version3 来创建扩展程序。
创建清单
每个扩展都要有一个名为 manifest.json 的 JSON 格式的清单文件，第一步要创建这个文件。
{
"name": "搜索",
"description": "百度 必应 360 搜狗 谷歌",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
"action": {
"default_icon": "img/icon.png",
"default_title": "搜索",
"default_popup": "index.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"notifications",
"contextMenus"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"run_at": "document_idle"
}]
}
- manifest_version、name、version 字段是必须的。
- action 定义扩展的图标、标题和用户界面。
- manifest_version2 的 background.scripts 要替换为 manifest_version3 的 background.service_worker。
- 与 DOM 互动要使用 content_scripts 里面的 js 字段配置。matches 字段可使用通配符设置，例如
*://*.juejin.cn/*。 - permissions 字段定义要使用的权限。这里使用了两个：通知和弹出菜单。
manifest_version3 不支持多个后台脚本，但可以将 service_worker 声明为 ES 模块来引入多个文件：
// Manifest V2
{
...
"background": {
"scripts": [
"backgroundContextMenus.js",
"backgroundOauth.js"
],
"persistent": false
},
...
}
// Manifest V3
{
...
"background": {
"service_worker": "background.js",
"type": "module" //optional
}
...
}
交互逻辑
manifest.json 清单文件里面定义的文件都要保证不能缺少。不然会报错无法使用。
background.js
这个是 service_worker，用来与浏览器互动，并与 content_scripts 通信。下面定义了两个事件监听，一个点击弹出菜单项的事件，一个点击扩展图标的事件。
const sendData = (data) => {
chrome.tabs.query({
active: true,
currentWindow: true
}).then(tabs => {
chrome.tabs.sendMessage(tabs[0].id, data)
});
};
// 点击弹出菜单
chrome.contextMenus.onClicked.addListener(function(item, tab) {
if (!tab.url.startsWith('chrome://')) sendData(item);
});
// 点击扩展图标
chrome.runtime.onMessage.addListener(function(data, sender, sendResponse) {
sendData(data);
});
content-script.js
这个文件是与 background.js 通信，根据收到的数据，可对页面 DOM 进行操作。
chrome.runtime.onMessage.addListener((data, sender, sendResponse) => {
if (data.menuItemId) {
switch (data.menuItemId) {
case 'bing':
url = 'https://cn.bing.com/search?q=';
break;
case '360':
url = 'https://www.so.com/s?q=';
break;
case 'sogou':
url = 'https://sogou.com/web?query=';
break;
case 'google':
url = 'https://www.google.com/search?q=';
break;
default:
url = 'https://www.baidu.com/s?wd=';
}
window.open(data.selectionText ? url + data.selectionText : new URL(url).origin);
}
});
使用
- git clone https://github.com/zkrisj/chrome-search.git。
- 打开扩展程序管理页面。
- 点击右上角开启开发者模式。
- 点击 加载已解压的扩展程序。选择第 1 步的文件夹。