我有一个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*没有。也许这与我定义规则的方式有关?
下面是一个示例。
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;
}
});
这是基于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});
}