ブラウザ拡張機能でHTTPリクエストを操作する

概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の20日目の記事です。

ブラウザ拡張機能でHTTPリクエストを操作してみます。

やること

Mozzilaのサイトの例をもとに特定のHTTPリクエストをキャッチして別のURLへとリダイレクトさせます。

なおソースコード自体は下記のものを使用しますが、manifest.jsonの書き方など一部変えたほうが良い点を記載します。

リクエストのリダイレクト

具体的なソースコード

上記URLではv2のmanifest.jsonを使用しているためv3へ変更したものを記載します。

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "[e-mail]"
        }
    },
    "manifest_version": 3,
    "name": "init-extention",
    "version": "0.1",
  
    "description": "HTTPリクエストへの介入のサンプル",
  
    "icons": {
      "48": "icons/icon-48.png"
    },

    "background": {
        "scripts": ["background.js"]
      },
  
    "permissions": [
        "webRequest", 
        "webRequestBlocking"
    ],

    "host_permissions": [
        "https://developer.mozilla.org/*"
    ]
}  

browser_specific_settingsおよびhost_permissionsを追加しています。

拡張機能実行時の注意点

Mozzilaのサイトで紹介されている通りに拡張機能を実行しても正常に動作しない場合があります。
多くの場合はブラウザがキャッシュを持っていて、リダイレクト先の画像（カエルの画像）が表示されないというものです。

そのためF12キーで開発者ツールを表示してキャッシュを無効化して試します。