Adding a Disable Button to Chrome Extension

Question

I am looking to add a disable button in the popup window of my chrome extension that will have it pause functionality like the Adblock extension does. This would remain paused in all tabs until the button is clicked to re-enable it. I have the following code in place, however, the button and functionality don't currently work.

Popup.js file:

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 = "";
        }
    });

There is more code below this, but it is functioning code that cannot be shared out.

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);
    }
});

Any help on this is greatly appreciated!

Answer 1

After going through the code that you have provided, it seems like there are some trivial misses that happened in the code, which led to the functionality failure.

I'll be pointing out the mistakes you have done here :

• In Popup.js, the variable isExtensionOn has the functional scope of the disableButton(), and hence cannot be accessed inside the document.addEventListener('DOMContentLoaded', function () { }) event listener.

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

  To fix this, you just need to define the variable isExtensionOn on a level above (say global level), so that it is accessible to both function disableButton() { }) and the event listener of DOMContentLoaded.

• In Popup.js, the function block chrome.extension.sendMessage({cmd: "getOnOffState"}, function (response) { }) contains a disableButton, which I see is nowhere defined within the functional scope of the event listener of DOMContentLoaded. And you are performing assignment to it, which would throw you errors in the console of whatever browser you are using which would look like:

  Uncaught ReferenceError: disableButton is not defined

  To fix this issue, you need to define the disableButton within the scope of the event listener of DOMContentLoaded.

• In Popup.js, inside the event listener of DOMContentLoaded, you have defined a variable singleButton as var singleButton = document.getElementById("singleButton");, but I see that in the Popup.html file that you have provided, there is no element but the id of singleButton.

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

  To fix this issue, you need to correct the id mentioned, as document.getElementById("disableButton"); within the scope of the event listener of 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)

Hence to sum up, I am writing the entire code of all the files that you have mentioned here with the appropriate corrections:

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);
        }
    });

This should work as per your requirement. Please go through the answer and let me know if you face any more issues in this regard.