本文基于 manifest_v2 版本
简介
https://developer.chrome.com/docs/extensions/
Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.
能力
- 右键菜单
- 调试栏tab
- 插件弹窗
- 监听/拦截网络请求
- 自定义空白页
- 注入脚本
- 书签，浏览记录，下载记录......
特点
- 用户控制
- 随时插拔
- 本地运行
- 开源
说明文件
manifest.json
示例：
{
"name": "Hello, World!",
"version": "1.0",
"manifest_version": 2, // 现在可用2/3，详情见官方文档
"permissions": [ // 权限
"tabs",
"clipboardWrite",
"http://*/*",
"https://*/*",
"webRequest",
"bookmarks"
],
"browser_action": { // 插件栏的描述
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
"content_scripts": [ // 随页面运行的脚本
{
"matches": [
"<all_urls>"
],
"all_frames": false,
"run_at": "document_end",
"js": [
"dev.js"
]
}
],
"background": { // 后台常驻脚本
"scripts": [
"background.js"
]
}
}
模块
background
后台运行脚本，可选常驻
popup
插件弹窗
content-script
位于当前页面的作用域的脚本，可以和当前页面共享变量
通信
页面 & content-scripts
使用postMessage
// 发送方
window.postMessage(
'content', "*"
);
// 接收方
window.addEventListener("message", function (ev) {
console.log(ev.data)
})
content-scripts & popup
chrome.runtime.sendMessage / onMessage
// 发送方
chrome.runtime.sendMessage({
info: "send"
}, res => {
console.log(res)
})
// 接收方
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
console.log('send', req)
sendResponse('callback')
})
popup & background
var background = chrome.extension.getBackgroundPage(); // 得到background页的windows对象
background.GetMessageFromPopup("给background点东西")
function GetMessageFromBackground(data) {
console.log("background给我的东西~", data)
}
var popup = chrome.extension.getViews({ type: "popup" })[0]
popup.GetMessageFromBackground("给popup点东西~")
function GetMessageFromPopup(data) {
var popup = chrome.extension.getViews({ type: "popup" })[0]
popup.GetMessageFromBackground("给popup点东西~")
console.log("popup给我的东西~", data)
}
参考
https://www.jianshu.com/p/3c7fea458245
https://juejin.cn/post/7001037081875054628
