官方文檔：
mv3文檔：https://developer.chrome.com/docs/extensions/mv3/
mv2升級mv3： https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

谷歌官方MV2支持時間表

image.png

由于官方即將不支持MV2，所以這里簡單的介紹下如何開發(fā)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版本，這里默認(rèn)是3
icons  // 圖標(biāo)，最好是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 //清單屬性聲明哪些擴展程序、應(yīng)用程序和網(wǎng)頁可以通過 runtime.connect 和 runtime.sendMessage 連接到您的擴展程序
permissions // 擴展需要的權(quán)限
host_permissions // 頁面權(quán)限

好了，建了一個基本的manifest.json，下面編寫里面的文件。

#目錄結(jié)構(gòu)如下：
.
├── 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

文件構(gòu)建完成之后，就可以加載了，打開谷歌瀏覽器的擴展程序，chrome瀏覽器中輸入地址：chrome://extensions/

image.png

image.png

下面就可以編寫我們的文件，實現(xiàn)一些簡單的功能。

# background.js
// 后臺監(jiān)聽事件消息
// 如果manifest.json未配置 action.default_popup，點擊擴展按鈕會觸發(fā)此事件
chrome.action.onClicked.addListener(function (tab) {
    chrome.action.setTitle({ tabId: tab.id, title: "You are on tab:" + tab.id });
});


// 后臺監(jiān)聽事件消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {

    let requestType = message.type;

    switch (requestType) {
        // 檢測是否是擴展開啟狀態(tài)
        case "checkFlag":
            sendResponse({ "runtime": true });
            break;

        // 開始學(xué)習(xí)
        case "startRun":
            sendResponse({ "complete": 1 });
            break;
    }
});


// 插件安裝監(jiān)聽事件
chrome.runtime.onInstalled.addListener(() => {

    // 清除插件所有的本地數(shù)據(jù)
    chrome.storage.local.clear();

    // 設(shè)置初始數(shù)據(jù)
    chrome.storage.local.set({
        "demo": "demo 數(shù)據(jù)",
        "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，這個時候刷新下我們的插件更新我們寫的代碼，我們?yōu)g覽器中隨便輸入jianshu的一個連接，就可以看到以下結(jié)果。

image.png

這樣一個簡單的插件就寫好了。
后面再豐富一下其他的功能，具體參考源碼地址！

附上源碼地址：https://github.com/ttglad/chrome-extension-v3-demo
瀏覽器截圖插件：https://github.com/ttglad/chrome-extension-screenshot