How do I implement an on/off switch for my chrome extension? - Javascript

NicholasPicklas
April 2, 2023
141 views
0 votes
2 Answers

I have a chrome extension that blocks a few websites. I’m trying to make a toggle switch so that it will stop blocking the sites when the switch is toggled off. Currently, I have the html and css implemented into a popup menu, but no code that actually turns off the script and removes the blocks. How can I implement some code that will turn off the script?

I am using version 111.0.5563.146 of google chrome, manifest version 3.

Here is the code I currently have:

manifest.json

{
    "manifest_version": 3,
    "name": "On-Off Switch",
    "version": "1.0.0",
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "declarative_net_request": {
        "rule_resources": [
            {
                "id": "ruleset_1",
                "enabled": false,
                "path": "ruleset_1.json"
            }
        ]
    },
    "permissions": [
        "declarativeNetRequest",
        "storage"
    ]
}

popup.html

<!DOCTYPE html>
<html>
    <head>
        <title>popup</title>
    </head>
    <body>
        <p>popup</p>
        <button id="on">On</button>
        <button id="off">Off</button>
        <script src="popup.js"></script>
    </body>
</html>

popup.js

document.getElementById("on").onclick = () => {
  chrome.storage.local.set({active: true});
}

document.getElementById("off").onclick = () => {
  chrome.storage.local.set({active: false});
}

ruleset_1.json

[
    {
        "id": 1,
        "action": { "type": "block" },
        "condition": { "urlFilter": "stackoverflow.com", "resourceTypes": ["main_frame"] }
    },
    {
        "id": 2,
        "action": { "type": "block" },
        "condition": { "urlFilter": "google.com/search*", "resourceTypes": ["main_frame"] }
    }
]

background.js

async function runtime_on_installed(details) {
    if (details.reason == "install") {
        // Store the extension's current state
        // which is determined by the "declarative_net_request" key in manifest.json
        let ruleset_ids = await chrome.declarativeNetRequest.getEnabledRulesets();
        if (ruleset_ids.length == 0) {
            // Extension is currently inactive
            await chrome.storage.local.set({active: false});
        }
        else if (ruleset_ids.length == 1) {
            // Extension is currently active
            await chrome.storage.local.set({active: true});
        }
    }
    else if (details.reason == "update") {
        // Restore the extension's stored state
        // https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#method-updateEnabledRulesets
        // "Note that the set of enabled static rulesets is persisted across sessions but not across extension updates, i.e. the rule_resources manifest key will determine the set of enabled static rulesets on each extension update."
        let { active } = chrome.storage.local.get("active");
        let ruleset_ids = await chrome.declarativeNetRequest.getEnabledRulesets();
        if (active && ruleset_ids.length == 0) {
            // Extension is supposed to be active, but is inactive
            chrome.declarativeNetRequest.updateEnabledRulesets({enableRulesetIds: ["ruleset_1"]});
        }
        else if (!active && ruleset_ids.length == 1) {
            // Extension is supposed to be inactive, but is active
            chrome.declarativeNetRequest.updateEnabledRulesets({disableRulesetIds: ["ruleset_1"]});
        }
    }
}

function storage_on_changed(changes, area_name) {
    if (area_name == "local") {
        if (changes.active.oldValue == false && changes.active.newValue == true) {
            chrome.declarativeNetRequest.updateEnabledRulesets({enableRulesetIds: ["ruleset_1"]});
        }
        else if (changes.active.oldValue == true && changes.active.newValue == false) {
            chrome.declarativeNetRequest.updateEnabledRulesets({disableRulesetIds: ["ruleset_1"]});
        }
    }
}

chrome.runtime.onInstalled.addListener(runtime_on_installed);
chrome.storage.onChanged.addListener(storage_on_changed);

At the moment, neither block works. Just before the stackoverflow.com block worked, but the google.com/search* did not. Maybe it has to do with the way I’m defining the rules?

Tags: google-chrome-extension javascript

Answers

Here is a sample of it.

manifest.json

{
  "name": "hoge",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "declarativeNetRequest"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<html>
<body>
  <button id="add">Add</button>
  <button id="remove">Remove</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById("add").onclick = () => {
  chrome.runtime.sendMessage({ method: "add" });
}

document.getElementById("remove").onclick = () => {
  chrome.runtime.sendMessage({ method: "remove" });
}

background.js

const rule =
{
  "id": 1,
  "action": {
    "type": "block"
  },
  "condition": {
    "urlFilter": "stackoverflow.com",
    "resourceTypes": ["main_frame"]
  }
};

chrome.runtime.onMessage.addListener((message) => {
  switch (message.method) {
    case "add":
      chrome.declarativeNetRequest.updateDynamicRules({ addRules: [rule] });
      break;
    case "remove":
      chrome.declarativeNetRequest.updateDynamicRules({ removeRuleIds: [1] });
      break;
  }
});

This is based on NorioYamamoto’s answer (that’s why I’ve upvoted it), but uses static rules.

manifest.json

{
    "manifest_version": 3,
    "name": "On-Off Switch",
    "version": "1.0.0",
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "declarative_net_request": {
        "rule_resources": [
            {
                "id": "ruleset_1",
                "enabled": false,
                "path": "ruleset_1.json"
            }
        ]
    },
    "permissions": [
        "declarativeNetRequest",
        "storage"
    ]
}

ruleset_1.json

[
    {
        "id": 1,
        "action": { "type": "block" },
        "condition": { "urlFilter": "stackoverflow.com", "resourceTypes": ["main_frame"] }
    }
]

background.js

async function runtime_on_installed(details) {
    if (details.reason == "install") {
        // Store the extension's current state
        // which is determined by the "declarative_net_request" key in manifest.json
        let ruleset_ids = await chrome.declarativeNetRequest.getEnabledRulesets();
        if (ruleset_ids.length == 0) {
            // Extension is currently inactive
            await chrome.storage.local.set({active: false});
        }
        else if (ruleset_ids.length == 1) {
            // Extension is currently active
            await chrome.storage.local.set({active: true});
        }
    }
    else if (details.reason == "update") {
        // Restore the extension's stored state
        // https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#method-updateEnabledRulesets
        // "Note that the set of enabled static rulesets is persisted across sessions but not across extension updates, i.e. the rule_resources manifest key will determine the set of enabled static rulesets on each extension update."
        let { active } = await chrome.storage.local.get("active");
        let ruleset_ids = await chrome.declarativeNetRequest.getEnabledRulesets();
        if (active && ruleset_ids.length == 0) {
            // Extension is supposed to be active, but is inactive
            chrome.declarativeNetRequest.updateEnabledRulesets({enableRulesetIds: ["ruleset_1"]});
        }
        else if (!active && ruleset_ids.length == 1) {
            // Extension is supposed to be inactive, but is active
            chrome.declarativeNetRequest.updateEnabledRulesets({disableRulesetIds: ["ruleset_1"]});
        }
    }
}

function storage_on_changed(changes, area_name) {
    if (area_name == "local") {
        if (changes.active.oldValue == false && changes.active.newValue == true) {
            chrome.declarativeNetRequest.updateEnabledRulesets({enableRulesetIds: ["ruleset_1"]});
        }
        else if (changes.active.oldValue == true && changes.active.newValue == false) {
            chrome.declarativeNetRequest.updateEnabledRulesets({disableRulesetIds: ["ruleset_1"]});
        }
    }
}

chrome.runtime.onInstalled.addListener(runtime_on_installed);
chrome.storage.onChanged.addListener(storage_on_changed);

popup.html

<!DOCTYPE html>
<html>
    <head>
        <title>Popup</title>
    </head>
    <body>
        <p>Popup</p>
        <button id="on">On</button>
        <button id="off">Off</button>
        <script src="popup.js"></script>
    </body>
</html>

popup.js

document.getElementById("on").onclick = () => {
    chrome.storage.local.set({active: true});
}

document.getElementById("off").onclick = () => {
    chrome.storage.local.set({active: false});
}

Please signup or login to give your own answer.

Click here to cancel reply.

How do I implement an on/off switch for my chrome extension? – Javascript

Answers