Chrome拡張機能 mv3 でリクエストヘッダ書き換え

Manifest v3 のChrome拡張機能でリクエストヘッダを書き換えたい時はdeclarativeNetRequestAPIを使います。

以下はリクエスト時のリファラを書き換えるコード例です。

コード例

manifest.json

{
  ...
  "permissions": [
    ...
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  ...

コード:

/**
 * 指定したリファラに書き換える関数
 * @param  {String} referer
 */
async function updateReferer(referer) {
  const addRules = [];
  // ルールを作成
  addRules.push({
    "id": 1, // ユニークID (ルールを複数登録したい場合はここを変更して登録する)
    "priority": 1,
    "action": {
      "type": "modifyHeaders", // ヘッダの書き換えアクションを指定
      "requestHeaders": [{
        "header": "Referer", // リファラのヘッダキー
        "operation": "set",
        "value": referer, // リファラのヘッダ値
      }],
    },
    "condition": {
      "urlFilter": "*.example.com", // 書き換え対象リクエスト先
      "resourceTypes": ["xmlhttprequest"], // XHRを対象に
    },
  });
  // 前に登録したrulesを一旦削除
  const removeRuleIds = addRules.map(x => x.id);
  await chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds,
  });
  // rulesを登録する
  await chrome.declarativeNetRequest.updateDynamicRules({
    addRules,
  });
}

// refererを "http://foo" にセット
await updateReferer("http://foo");

// この後フェッチAPIなどでURLをフェッチすると
// refererは "http://foo" に書き換わります。

以上です。