Question

这是我的清单

{
    "name": "my-extension",
    "version": "0.0.9",
    "manifest_version": 2,
    "icons": {
        "16": "img/icon16.png",
    },
    "browser_action": {
        "default_icon": "img/icon16.png",
        "default_popup": "html/popup.html"
    },
    "web_accessible_resources": [
        "data/links.json"
    ],
    "content_scripts": [...],
    "background": {
        "scripts": [
            "js/background.js"
        ]
    },
    "permissions": [
        "tabs",
    ]
}

我希望在html/popup.html中加入一个切换，以便当用户单击它时，我可以存储一些布尔值来知道我的扩展程序是启用还是禁用。然后，在content_scripts中，我可以使用此布尔值来知道是否执行任务。

到目前为止，我有一个基本的html/popup.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body id="popup">
    <button>
        <!-- Somehow add a text on/off here based on the state -->
    </button>
</body>
</html>

Answer 1

您可以使用chrome.storage API在弹出窗口和内容脚本之间同步信息。例如：

popup.html

<body>
    <button id="toggle"></button>
    <script src="popup.js"></script>
</body>

popup.js

var enabled = false; //disabled by default
var myButton = document.getElementById('toggle');

chrome.storage.local.get('enabled', data => {
    enabled = !!data.enabled;
    myButton.textContent = enabled ? 'Disable' : 'Enable';
});

myButton.onclick = () => {
    enabled = !enabled;
    myButton.textContent = enabled ? 'Disable' : 'Enable';
    chrome.storage.local.set({enabled:enabled});
};

content_script.js

chrome.storage.local.get('enabled', data => {
    if (data.enabled) {
        //it is enabled, do accordingly
    } else {
        //it is disabled
    }
});

Chrome扩展程序显示用于启用/禁用扩展程序的切换

1 个答案: