Question

我希望在我的Chrome扩展程序的弹出窗口中添加一个禁用按钮，它会暂停Adblock扩展功能。这将在所有选项卡中保持暂停状态，直到单击该按钮以重新启用它。我有以下代码，但按钮和功能目前无效。

Popup.js文件：

function disableButton() {
    var disableButton = document.getElementById("disableButton");
    var isExtensionOn = true;
    if (disableButton.innerHTML == "Disable") {
        isExtensionOn = false;
    } else if (disableButton.innerHTML == "Enable") {
        isExtensionOn = true;
    } else {
        alert("Error");
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var singleButton = document.getElementById("singleButton");
    var br1 = document.getElementById("br1");
    var br2 = document.getElementById("br2");
    //Sends message to event.js (background script) telling it to disable the
    chrome.extension.sendMessage({ cmd: "setOnOffState", data: {value: isExtensionOn} });

    chrome.extension.sendMessage({ cmd: "getOnOffState"}, function(response){
        console.log(response);
        if (response == true){
            disableButton.innerHTML = "Disable";
            disableButton.className = "button button3"
            disableButton.style.display = "";
            br1.style.display = "";
            br2.style.display = "";
        }
        if (response == false){
            disableButton.innerHTML = "Enable";
            disableButton.className = "button button1"
            disableButton.style.display = "";
            br1.style.display = "";
            br2.style.display = "";
        }
    });

此下面还有更多代码，但它是无法共享的功能代码。

Popup.html：

<button class="button button1" id="disableButton" style="display:none">Error</button>
    <br id="br1" style="display:none">
<br id="br2" style="display:none">

Background.js：

var isExtensionOn = true;

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse){
    if (request.cmd == "setOnOffState") {
        isExtensionOn = request.data.value;
    }

    if (request.cmd == "getOnOffState") {
        sendResponse(isExtensionOn);
    }
});

非常感谢任何帮助！

Answer 1

在完成您提供的代码之后，似乎代码中发生了一些微不足道的错误，导致功能失败。

我会指出你在这里犯过的错误：

在 Popup.js 中，变量 isExtensionOn 具有disableButton()的功能范围，因此<在document.addEventListener('DOMContentLoaded', function () { })事件侦听器中访问strong>不能。

此侦听器函数中 isExtensionOn 的值为undefined，这不是您在系统中所期望的。

要解决此问题，您只需要在上面的某个级别（比如全局级别）定义变量isExtensionOn，以便function disableButton() { })和DOMContentLoaded的事件侦听器都可以访问它。
在 Popup.js 中，功能块chrome.extension.sendMessage({cmd: "getOnOffState"}, function (response) { })包含 disableButton ，我看到的DOMContentLoaded的事件监听器的功能范围内没有定义。并且您正在执行分配，这将在您使用的任何浏览器的控制台中抛出错误，如下所示：

Uncaught ReferenceError: disableButton is not defined

要解决此问题，您需要在DOMContentLoaded的事件侦听器范围内定义 disableButton 。
在 Popup.js 中，在DOMContentLoaded的事件监听器中，您已将变量 singleButton 定义为var singleButton = document.getElementById("singleButton");，但我在您提供的 Popup.html 文件中看到，除了 singleButton 的id之外，没有任何元素。

这将为您返回null的值，这也是您在系统中不期待的内容。

要解决此问题，您需要在id的事件监听器范围内更正document.getElementById("disableButton");提及的DOMContentLoaded。

注意：我提到了一些您可以遵循的更好的编码惯例约定



所有 html文件的命名需要以小写开头。

使用===代替==进行严格比较。有关相同内容的详细信息，请参阅here。

使用适当的缩进，以免错过任何大括号或提交无意的错误。（您在为})}定义事件监听器的代码块中错过了DOMContentLoaded

总而言之，我正在编写您在此处提及的所有文件的完整代码，其中包含适当的更正：

popup.html ：

<button class="button button1" id="disableButton" style="display:none">Error</button>
<br id="br1" style="display:none">
<br id="br2" style="display:none">

Popup.js ：

var isExtensionOn = true;

function disableButton() {
    var disableButton = document.getElementById("disableButton");
    if (disableButton.innerHTML === "Disable") {
        isExtensionOn = false;
    } else if (disableButton.innerHTML === "Enable") {
        isExtensionOn = true;
    } else {
        alert("Error");
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var disableButton = document.getElementById("disableButton");
    var br1 = document.getElementById("br1");
    var br2 = document.getElementById("br2");

//Send message to event.js (background script) telling it to disable the extension.

    chrome.extension.sendMessage({cmd: "setOnOffState", data: {value: isExtensionOn}});

    chrome.extension.sendMessage({cmd: "getOnOffState"}, function (response) {
        if (response !== undefined) {
            if (response) {
                disableButton.innerHTML = "Disable";
                disableButton.className = "button button3";
                disableButton.style.display = "";
                br1.style.display = "";
                br2.style.display = "";
            }
            else {
                disableButton.innerHTML = "Enable";
                disableButton.className = "button button1";
                disableButton.style.display = "";
                br1.style.display = "";
                br2.style.display = "";
            }
        }
    });
});

Background.js ：

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.cmd === "setOnOffState") {
            isExtensionOn = request.data.value;
        }

        if (request.cmd === "getOnOffState") {
            sendResponse(isExtensionOn);
        }
    });

这应该符合您的要求。请仔细阅读答案，如果您在这方面遇到任何问题，请告诉我。

Answer 2

您提供的脚本部分存在范围错误。请参阅DOMContentLoaded事件中的此行：

chrome.extension.sendMessage({ cmd: "setOnOffState", data: {value: isExtensionOn} });

据我所知，该范围内没有名为isExtensionOn的变量。它在disableButton ()的函数范围中定义，但不在事件中定义。因此，您的脚本会告诉后端将变量设置为undefined。

然后，当您继续检查true和false的值时，这两个值都不是。这可能会导致问题。要解决此问题，请将{value: isExtensionOn}更改为{value: false}。

其次，即使没有带有此ID的按钮，您也使用ID为singleButton的按钮。您将其分配给变量singleButton，但在下面的下方，您使用的是名为disableButton的按钮，该按钮未定义。

此外，您的最后一行缺少右括号：})。解决了所有这些问题后，插件工作正常，我已经测试过了。

提示

您可以通过打开弹出窗口，右键单击它然后选择Inspect Element来调试扩展程序并查看错误。切换到控制台选项卡。它将包含JavaScript错误。

Answer 3

弹出窗口可以通过chrome.runtime.getBackgroundPage直接访问后台脚本，因此更简单：

<强> popup.js

var backgroundPage;
var theButton = document.querySelector("button");

function updateButton(onOrOff){
    theButton.innerHTML = onOrOff ? "Disable" : "Enable";
    theButton.className = onOrOff ? "button button3" : "button button1";
}        

function toggleButton(){
    backgroundPage.isExtensionOn = !backgroundPage.isExtensionOn;
    updateButton(backgroundPage.isExtensionOn);
}

chrome.runtime.getBackgroundPage(function(bgPage) {
    backgroundPage = bgPage;
    updateButton(bgPage.isExtensionOn);
    theButton.onclick = toggleButton;
    theButton.style.display = "";
    document.getElementById("br1").style.display = "";
    document.getElementById("br1").style.display = "";
});

//the rest of your code just needs to check backgroundPage.isExtensionOn
//to see if the extension is on or not.

<强> popup.html

<button class="button button1" id="disableButton" style="display:none">Error</button>
<br id="br1" style="display:none">
<br id="br2" style="display:none">
<script src="popup.js"></script>

<强> background.js

var isExtensionOn = true;  //this will be changed by popup.js directly.

向Chrome扩展程序添加禁用按钮

3 个答案: