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

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 () { })事件侦听器.

  此侦听器函数中的isExtensionOn值将是undefined您在系统中预期的值.

  要解决这个问题,你只需要在上面的一个级别(比如全局级别)定义变量isExtensionOn,这样两者function disableButton() { })和事件监听器都可以访问它DOMContentLoaded.

• 在Popup.js中,函数块chrome.extension.sendMessage({cmd: "getOnOffState"}, function (response) { })包含一个disableButton,我看到它在事件监听器的功能范围内没有定义DOMContentLoaded.而你正在执行它的任务,这将在你使用的任何浏览器的控制台中引发错误,如下所示:

  Uncaught ReferenceError: disableButton is not defined

  要解决此问题,您需要在事件侦听器的范围内定义disableButtonDOMContentLoaded.

• 在Popup.js的事件侦听器里面DOMContentLoaded,您所定义的变量singleButton的var singleButton = document.getElementById("singleButton");,但我看到的是,在Popup.html您所提供的文件,没有任何元素,但id的singleButton.

  这将为您返回一个值null,这也是您在系统中不期待的东西.

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

注意:我提到了一些可以遵循的约定,以便更好地编写代码

1. 命名为所有的HTML文件需要先从较低的情况下.
2. 使用===而不是==严格的比较.有关相同的更多详情,请参阅此处.
3. 使用适当的缩进,以免错过任何大括号或犯下无意的错误.(您错过了})在您定义事件监听器的代码块中的a 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}.

其次,singleButton即使没有带有此ID的按钮,您也使用带有id 的按钮.您正在将其分配给变量singleButton,但在下面,您正在使用一个名为的按钮disableButton,该按钮未定义.

另外,你的最后一行缺少右括号:}).解决了所有这些问题后,插件工作正常,我已经测试过了.

小费:

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