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

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">

背景.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 () { }) 中被访问事件监听器。

  The value of isExtensionOn inside this listener function would be undefined, which is not something that you expect in your system.

  要解决这个问题，您只需要在更高级别(比如全局级别)上定义变量 isExtensionOn，以便 function disableButton() { }) 都可以访问它。和 DOMContentLoaded 的事件监听器.

• 在 Popup.js 中，函数 block 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 文件中，除了 id 之外没有其他元素。 单按钮。

  This would return you a value of null, again which is something that you are not looking forward to have in your system.

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

NOTE : I am mentioning some conventions that you can follow for better coding practises

1. Naming for all the html files need to start with lower cases.
2. Use === instead of == for strict comparision. Refer here for more details about the same.
3. Use proper indentations so as to not miss out any braces or commit unintentional errors. (You had missed out a }) in the code block where you defined the event listener for 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);
        }
    });

这应该可以满足您的要求。请仔细阅读答案，如果您在这方面遇到更多问题，请告诉我。