Chrome extension on/off toggle button

user_15094806 0
Viewed 404

I'm trying to create a button for my chrome extension that will toggle on/off the function of the extension. It's a simple AdBlock-style extension.

Currently, I have 4 scripts popup.js, popup.html, mainfest.json & background.js

For some reason I can't get this function if work, I've looked online at how other people have done this but couldn't get any of that to work either.

Any help would be great, either modifying my method or if there's a better way I'm unaware of!

Thanks!

Popup.js

var background = chrome.extension.getBackgroundPage();
var theButton = document.querySelector("button");

function updateButton(onOrOff){
    theButton.innerHTML = onOrOff ? "Disable" : "Enable";
    theButton.className = onOrOff ? "buttonOFF" : "buttonON";
}        

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

chrome.runtime.getBackgroundPage(function(backgroundpage) {
   background = backgroundpage;
   updateButton(backgroundpage.isExtensionOn);
   theButton.onclick = toggleButton;
   
if (background.isExtensionOn == true){
    alert("on");
}

if (background.isExtensionOn == false){
    alert("off");
}

});

Background.js

var isExtensionOn = true;

popup.html

    <button type="button1" class="button1" id="disableButton">Toggle</button>
    <script src="popup.js"></script>

TIA!

google-chrome-extension google-chrome javascript
1 Answers

By any chance have you looked into chrome storage? Haven't had much experience with getBackgroundPage, but here's my solution

background.js

chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.local.set({ 'onOrOff': true }, result => {
        console.log("On Installed Set value to on")
    })
})

var isExtensionOn = true;

chrome.storage.onChanged.addListener(function (changes, area) {
    if (area === 'local' && changes.onOrOff) {
        console.log(changes.onOrOff.newValue)
        // extension is on
        if (changes.onOrOff.newValue) {
           isExtensionOn = true;
        }
        // extension is off
        else {
            console.log("Extension Is Off")
            isExtensionOn = false;

        }

    }
})

popup.js

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

function updateButton() {
    // update button based on storage
    chrome.storage.local.get(['onOrOff'], result => {
        theButton.innerHTML = result.onOrOff ? "enabled" : "disabled";
        theButton.className = result.onOrOff ? "buttonON" : "buttonOFF";
    })
}

function toggleButton(e) {
    // check className of button
    var bool = e.target.className === 'buttonON' ? false : true
    chrome.storage.local.set({ 'onOrOff': bool }, result => {
        updateButton()
    })

}

updateButton()
theButton.onclick = toggleButton

If you're interested in this solution, I would recommend looking into synchronous response to storage changes as well to make this cleaner. Also be sure to enable it in your permissions key in the manifest.json

user_113372730
Related