官方文档：
mv3文档：https://developer.chrome.com/docs/extensions/mv3/
mv2升级mv3： https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/
谷歌官方MV2支持时间表
image.png
由于官方即将不支持MV2，所以这里简单的介绍下如何开发MV3。
话不多说，开始。
新建一个manifest.json，具体格式参考连接 https://developer.chrome.com/docs/extensions/mv3/manifest/
{
"name": "ttglad-demo",
"description": "ttglad-demo for chrome extension mv3",
"version": "1.0.0",
"manifest_version": 3,
"icons": {
"16": "img/icon_16x16.png",
"32": "img/icon_32x32.png",
"48": "img/icon_48x48.png",
"128": "img/icon_128x128.png"
},
"action": {
"default_popup": "html/popup.html",
"default_icon": "img/icon_128x128.png",
"default_title": "a default title"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"js": [
"js/test.js"
],
"matches": [
"*://*.jianshu.com/*"
]
}
],
"externally_connectable": {
"matches": [
"*://*.jianshu.com/*"
]
},
"permissions": [
"tabs",
"notifications",
"storage"
],
"host_permissions": [
"*://*.jianshu.com/*"
]
}
#简单介绍下里面的字段意思
manifest_version // manifest版本，这里默认是3
icons // 图标，最好是PNG，支持BMP, GIF, ICO, and JPEG. 支持四种大小像素 16*16，32*32，48*48，128*128
action // 工具栏按钮，mv2里面写法：browser_action、page_action
background // 核心 background.js需要在根目录
content_scripts // 页面注入js
externally_connectable //清单属性声明哪些扩展程序、应用程序和网页可以通过 runtime.connect 和 runtime.sendMessage 连接到您的扩展程序
permissions // 扩展需要的权限
host_permissions // 页面权限
好了，建了一个基本的manifest.json，下面编写里面的文件。
#目录结构如下：
.
├── background.js
├── html
│ └── popup.html
├── img
│ ├── icon_128x128.png
│ ├── icon_16x16.png
│ ├── icon_32x32.png
│ └── icon_48x48.png
├── js
│ └── test.js
└── manifest.json
3 directories, 8 files
文件构建完成之后，就可以加载了，打开谷歌浏览器的扩展程序，chrome浏览器中输入地址：chrome://extensions/
image.png
image.png
下面就可以编写我们的文件，实现一些简单的功能。
# background.js
// 后台监听事件消息
// 如果manifest.json未配置 action.default_popup，点击扩展按钮会触发此事件
chrome.action.onClicked.addListener(function (tab) {
chrome.action.setTitle({ tabId: tab.id, title: "You are on tab:" + tab.id });
});
// 后台监听事件消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
let requestType = message.type;
switch (requestType) {
// 检测是否是扩展开启状态
case "checkFlag":
sendResponse({ "runtime": true });
break;
// 开始学习
case "startRun":
sendResponse({ "complete": 1 });
break;
}
});
// 插件安装监听事件
chrome.runtime.onInstalled.addListener(() => {
// 清除插件所有的本地数据
chrome.storage.local.clear();
// 设置初始数据
chrome.storage.local.set({
"demo": "demo 数据",
"env": "dev"
}, function () {
console.log("chrome extension is install.");
});
});
# test.js
chrome.runtime.sendMessage({ type: "checkFlag" }, (response) => {
if (response && response.hasOwnProperty("runtime")) {
if (response.runtime) {
console.log("send message success!");
}
}
});
我们再manifest.json里写了，jianshu.com域名中注入test.js，这个时候刷新下我们的插件更新我们写的代码，我们浏览器中随便输入jianshu的一个连接，就可以看到以下结果。
image.png
这样一个简单的插件就写好了。
后面再丰富一下其他的功能，具体参考源码地址！
附上源码地址：https://github.com/ttglad/chrome-extension-v3-demo
浏览器截图插件：https://github.com/ttglad/chrome-extension-screenshot
