chrome插件manifest V3开发

官方文档：
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