javascript 如何为我的chrome扩展程序实现开/关开关？

ryevplcw 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(136)

我有一个chrome扩展，阻止了一些网站。我试图做一个切换开关，以便它将停止阻止的网站时，开关被切换关闭。目前，我有html和css实现到一个弹出菜单，但没有代码，实际上关闭脚本和删除块。我如何实现一些代码，将关闭脚本？
我使用的是111.0.5563.146版本的google chrome，manifest版本3。
下面是我目前拥有的代码：
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);

目前，这两个块都不工作。就在stackoverflow.com块工作之前，但google.com/search*没有。也许这与我定义规则的方式有关？

JavaScript

来源：https://stackoverflow.com/questions/75910102/how-do-i-implement-an-on-off-switch-for-my-chrome-extension

2条答案

按热度按时间

nqwrtyyt1#

这是一个样本。
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;
  }
});

赞(0）回复(0）举报 2023-04-04

cvxl0en22#

这是基于NorioYamamoto的答案（这就是为什么我投了赞成票），但使用静态规则。
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});
}

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何为我的chrome扩展程序实现开/关开关？

2条答案

相关问题

热门标签

最新问答