Chrome插件开关

文件结构

1
2
3
4
5
Chrome_extension_dir
├── manifest.json
├── scripts
│   └── content.js
└── background.js

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "name": "Extension test",
    "description": "This is a test",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
        {
            "js": ["scripts/content.js"],
            "matches": [
                "http://www.example.com/*"
            ]
        }
    ]
    "permissions": ["activeTab"],
    "action": {},
    "background": {
        "service_worker": "background.js"
    }
}

background.js

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
41
42
43
44
45
46
47
48
49
50
let badgeText = 'OFF';
const web_address = 'http://www.example.com'

chrome.runtime.onInstall.addListener(() => {
    badgeText = 'OFF';
    chrome.action.setBadgeText({
        text: badgeText,
    });
});

chrome.runtime.onStartup.addListener(() => {
    badgeText = 'OFF';
    chrome.action.setBadgeText({
        text: badgeText,
    });
});

chrome.action.onClicked.addListener(async(tab) => {
    if (tab.url.startsWith(web_address)) {
        badgeText = badgeText === 'ON' ? 'OFF' : 'ON';

        await chrome.action.setBadgeText({
            tabId: tab.id,
            text: badgeText,
        });

        if (badgeText === 'ON') {
            chrome.tabs.sendMessage(tab.id, { action: 'setBadgeTextOn' });
        }

        if (badgeText === 'OFF') {
            chrome.tabs.sendMessage(tab.id, { action: 'setBadgeTextOff' });
        }
    }
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action) {
        case 'getBadgeText':
            if (badgeText === 'ON') {
                sendResponse('setBadgeTextOn');
            }
            if (badgeText === 'OFF') {
                sendResponse('setBadgeTextOff');
            }
            break;
        default:
            break;
    }
})

content.js

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
41
42
let badgeText = "OFF";

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    switch (request.action) {
        case "setBadgeTextOn":
            badgeText = "ON";
            break;
        case "setBadgeTextOff":
            badgeText = "OFF";
            break;
        default:
            break;
    }
});

const sendMessageToBackground = (message) => {
    chrome.runtime.sendMessage(message, (response) => {
        if (chrome.runtime.lastError) {
            console.error("发送消息失败", chrome.runtime.lastError);
        } else {
            switch (response.action) {
                case setBadgeTextOn:
                    badgeText = "ON";
                    break;
                case setBadgeTextOff:
                    badgeText = "OFF";
                    break;
                default:
                    break;
            }
        }
    });
};

(() => {
    sendMessageToBackground({ action: "getBadgeText" });
    setInterval(() => {
        if (badgeText === "ON") {
            // Do something here
        }
    }, 500);
})();