manifest v3 で画像をブロックする拡張機能を自作してみる

Chrome や Edge の拡張機能で今後採用される Manifest v3 では webRequest が廃止され、declarativeNetRequest に置き換わるとの事。
そこで、Manifest v3 で declarativeNetRequest を使って画像をブロックする簡単な拡張を作ってみました。
用意するファイルは「manifest.json」と「rules.json」の2つ。rules.json のファイル名は任意です。

manifest.json


{
"name": "Block Image Request",
"version": "1.0.0",
"manifest_version": 3,
"declarative_net_request": {
"rule_resources": [{
"id": "ruleset_1",
"enabled": true,
"path": "rules.json"
}]
},
"permissions": ["declarativeNetRequest"]
}

manifest_version を「3」にし、permissions に declarativeNetRequest を加え、ルールを記述するファイルをここでは rules.json にしています。

rules.json


[
{
"id": 1,
"priority": 1,
"action": {
"type": "block" },
"condition": {
"resourceTypes": ["image"] }
},
{
"id": 2,
"priority": 2,
"action": {
"type": "allowAllRequests" },
"condition": {
"urlFilter": "yaraneba.com",
"resourceTypes": ["main_frame"] }
}
]

id1では image のブロックルールを定義し、id2はホワイトリストとして作用させています。
id2の allowAllRequest を allow にして、resourceTypes を image にしても動作しそうですが、その場合、サードパーティの画像は許可されずにブロックされる様です。

逆に、ファーストパーティやサードパーティのみを許可・ブロックしたい場合は、"domainType": “firstParty"または"thirtParty"として定義する事が出来ます。
ここでは image を対象にしていますが、resourceType に script 等を指定してブロックする事も出来ます。

拡張機能として読み込ませる

Microsoft Edge の場合、拡張機能の管理ページを開き、「開発者モード」にチェックを入れて、上記作成した2つのファイルをフォルダに入れ、展開して読み込みから選択します。
構文エラーが出る時は何行目に問題が有るかも教えてくれるので修正して再度アップします。
Manifest v3 では、background 等の構文が入っているだけでインストールが弾かれます。

Edge はバージョン 87 の正式版でも読み込む事が出来ました。ただ、正式版でローカルの拡張を入れると警告がうるさいので dev 版等で利用する方が良いかもしれません。