Chrome 拡張機能でカスタムリクエストヘッダーを変更するには？

現行の Chrome 拡張機能は Manifest V3 上に構築されているため、Manifest V2 とはアプローチが異なります。

📝 実装方法

👉 リクエストの傍受


const RULE_ID = 10000;
...
chrome.declarativeNetRequest.updateDynamicRules({
      removeRuleIds: [
        RULE_ID
      ],
      addRules: [
        {
          id: RULE_ID,
          priority: 1,
          action: {
            type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
            requestHeaders: [
              {
                header: "CUSTOM-HEADER",
                operation: chrome.declarativeNetRequest.HeaderOperation.SET,
                value: "CUSTOME-VALUE"
              }
            ]
          },
          condition: {
            requestDomains: urls,
            resourceTypes: [
              // List all resource types
              chrome.declarativeNetRequest.ResourceType.MAIN_FRAME,
              chrome.declarativeNetRequest.ResourceType.SUB_FRAME,
              chrome.declarativeNetRequest.ResourceType.STYLESHEET,
              chrome.declarativeNetRequest.ResourceType.SCRIPT,
              chrome.declarativeNetRequest.ResourceType.IMAGE,
              chrome.declarativeNetRequest.ResourceType.FONT,
              chrome.declarativeNetRequest.ResourceType.OBJECT,
              chrome.declarativeNetRequest.ResourceType.XMLHTTPREQUEST,
              chrome.declarativeNetRequest.ResourceType.PING,
              chrome.declarativeNetRequest.ResourceType.CSP_REPORT,
              chrome.declarativeNetRequest.ResourceType.MEDIA,
              chrome.declarativeNetRequest.ResourceType.WEBSOCKET,
              chrome.declarativeNetRequest.ResourceType.OTHER
            ]
          }
        }
      ]
    })
...

👉 傍受の解除


chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [
    RULE_ID
  ],
  addRules: []
})

🤗 遭遇した問題

上記の問題は、該当フィールドを追加することで解消できます。

📎 参考資料

chrome.declarativeNetRequest - Chrome for Developers