chrome有一个特别棒的功能，叫做扩展程序，我们可以使用他来辅助我们浏览网页。
不过，别人的扩展程序用得多了，难免会想要整一个自己的扩展程序。
这里记录一下如何快速的将一个html 项目转换为扩展程序。
(除了传统的网页外，也执行现在流行vue或uniapp或taro等打包出来的html5的网页)
准备工作
我们可以先查看 官方的文档地址 , 了解一下写一个扩展程序需要做什么。
准备一个 html5 网页:
- 可以是
uniapp 打包的h5 (npm run build:h5)
- 可以是
taro 打包的h5 (npm run build:h5)
- 可以是
vue2/vue3 打包的dist (npm run build)
- 可以是其他前端项目
准备manifest.json文件
扩展程序需要有一个manifest.json文件，此 JSON 文件描述了扩展程序的功能和配置。具体请看https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn
一个最简单的manifest.json文件为：
1
2
3
4
5
6
7
8
9
10
| {
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
|
然后我们对它进行简单的修改，符合我们的要求：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| {
"name": "扩展程序的名字",
"version": "1.0",
"manifest_version": 3,
"description": "扩展程序的说明",
"action": {
"default_title": "鼠标移动到扩展程序的提示内容"
},
"background": {
"service_worker": "service-worker.js"
},
"side_panel": {
"default_path": "index.html"
},
"icons": {
"64": "static/logo.png",
"72": "static/logo.png",
"144": "static/logo.png"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"css": [],
"js": ["content-script.js"],
"run_at": "document_start"
}
],
"permissions": [
"contextMenus",
"tabs",
"notifications",
"webRequest",
"storage",
"sidePanel",
"cookies"
]
}
|
这个配置是作为侧边栏进行显示的，好处是，失去焦点的时候不会隐藏。
如果是弹出模式的话，使用以下配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| {
"name": "扩展程序的名字",
"version": "1.0",
"manifest_version": 3,
"description": "扩展程序的说明",
"action":
{
"default_icon": {
"64": "static/logo.png",
"72": "static/logo.png",
"144": "static/logo.png"
},
"default_popup": "index.html",
"default_title":"抬头名称"
},
"icons": {
"64": "static/logo.png",
"72": "static/logo.png",
"144": "static/logo.png"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"css": [],
"js": ["content-script.js"],
"run_at": "document_start"
}
],
}
|
对了由于chrome扩展插件的一些安全性考虑从而不支持内写script，需要修改一下html文件里面的内容。删除或修改包含内容的<script>节点。
侧边栏情况下的service-worker.js文件内容：
1
2
3
| chrome.runtime.onInstalled.addListener(() => {
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});
|
其实就是简单的，点击图标显示隐藏侧边栏。
content-script.js 内容一般根据自己的实际情况来写，可以要也可以不要，不要的话，就留空就好了。上面的这段，是为了做扩展程序与页面的通信，如果有这个功能的话，可以参考一下。
记得将这几个文件放到html的目录下。
测试
点开chrome的扩展程序管理，可以看到有一个按钮: 加载已解压的扩展程序 ，点击他，然后选择刚刚我们的目录。点击确定，便可以看到多了一个我们的扩展程序。
然后打开网页，点击看看效果。
如果使用popup模式，点击后发现页面很窄，则是宽度错误，可以给html文件里面的body节点或者最外层的节点，设置一下宽高，可以考虑使用:style="width:350px;height:600px;"。
扩展和网页间的通信
如果我们需要修改网页内容的话，直接修改是不行的，需要通过注入的js进行修改，这时候，就需要相互直接进行通信。
首先，我们需要将content-script.js文件加入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const hosts = [];
function initConnect() {
if (hosts.indexOf(!window.location.host) === -1) return;
console.log("content script init .");
var port = chrome.runtime.connect({name: "content-server"});
port.onDisconnect.addListener(function (...args) {
console.log("onDisconnect", ...args)
})
port.postMessage({type: "connect"});
port.onMessage.addListener(function (msg) {
console.log(msg);
console.log(document)
});
}
initConnect();
|
然后在我们的扩展程序的代码里加上：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| window.kChromeServerPorts = window.kChromeServerPorts || {
ports: [],
callback: [],
send(msg) {
for (let key in window.kChromeServerPorts.ports) {
let port = window.kChromeServerPorts.ports[key];
try {
port.postMessage(msg);
} catch (e) {
console.warn("port error:", port)
}
}
}
}
function initChromeServer() {
if (window.hasOwnProperty("initChromeServerInitFlag") && window.initChromeServerInitFlag) return;
window.initChromeServerInitFlag = true;
console.log("注册监听通道")
chrome.runtime.onConnect.addListener(function (port) {
console.assert(port.name === "content-server");
window.kChromeServerPorts.ports.push(port);
port.onMessage.addListener(function (msg) {
for (let key in window.kChromeServerPorts.callback) {
try {
window.kChromeServerPorts.callback[key] && window.kChromeServerPorts.callback[key](msg);
} catch (e) {
console.warn("cb error:", window.kChromeServerPorts.callback[key])
}
}
});
});
}
try {
initChromeServer();
} catch (e) {
console.warn("kChromeServer:", e)
}
|
然后刷新一下扩展程序，再刷新一下网页，试试看效果。
参考文章
官方的文档地址 https://developer.chrome.com/docs/extensions?hl=zh-cn
chrome sidePanel 侧边栏模式 https://developer.chrome.com/docs/extensions/reference/api/sidePanel?hl=zh-cn#type-PanelBehavior
chrome 消息传递 https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=zh-cn#connect
用uniapp编译chrome扩展程序（一）https://ask.dcloud.net.cn/article/39979
