declarativeNetRequest をショートカットキーで切り替える

拡張機能 manifest v3 の declarativeNetRequest で作成したルールの有効/無効をショートカットキーで切り替える方法です。
manifest v3 で画像をブロックする拡張機能を自作した時に、これをショートカットキーでオン/オフする目的で作りました。

用意するファイルは「manifest.json」と「rules.json」、「background.js」の3つ。rules.json のファイル名は任意です。

manifest.json


{
"name": "declarativeNetRequest extension",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"commands": {
"enabledCommand": {
"suggested_key": {
"default": "Ctrl+I"
},
"description": "ruleset の有効/無効を切り替える"}
},
"declarative_net_request": {
"rule_resources": [{
"id": "ruleset_1",
"enabled": true,
"path": "rules.json"
}]
},
"permissions": ["declarativeNetRequest", "storage"]
}

manifest_version を「3」にし、background で使えなくなった "scripts" を "service_worker" に置き換えています。
"commands" でショートカットを定義し、"suggested_key" でデフォルトのキーの組み合わせを指定していますが、これは後から拡張機能ページのキーボードショートカットで変更出来ます。

ルールを記述するファイルを rules.json として、そのファイルのパスを記述します。
permissions に declarativeNetRequest と ruleset の有効/無効を知る為に storage を追加します。

rules.json

ショートカットキーで有効/無効を切り替えるルールを記述します。


[
{
"id": 1,
"priority": 1,
"action": {
"type": "block" },
"condition": {
"resourceTypes": ["image"] }
}
]

ここでは画像をブロックするルールを記述していますが、"resourceTypes" を script にする等、オン/オフを切り替えたいルールを記述します。

background.js

ショートカットキーが押された時に ruleset の有効/無効を切り替えるコードを記述します。


chrome.commands.onCommand.addListener(() => {
chrome.storage.local.get('ruleset_1', (value) => {
if(value.ruleset_1 === false){
chrome.declarativeNetRequest.updateEnabledRulesets({
enableRulesetIds: ["ruleset_1"]
});
chrome.storage.local.set({ruleset_1: true}, () => {});
} else {
chrome.declarativeNetRequest.updateEnabledRulesets({
disableRulesetIds: ["ruleset_1"]
});
chrome.storage.local.set({ruleset_1: false}, () => {});
}
});
});

ショートカットキーが押された時に chrome.storage から ruleset_1 のデータを取り出し、その値が false なら manifest.json で定義した id が ruleset_1 の ruleset を有効化し、chrome.storage に true をセットします。
ruleset_1 の値が false でなかった場合は、ruleset を無効化し、chrome.storage に false をセットします。

これで、「Ctrl + I」を押す度に ruleset の有効/無効が切り替わりページをリロードすると画像の表示/非表示も切り替わります。