【Chrome Extension MV3】fetch の Header Referer を設定する方法

Chrome Extension 内で実行される fetch の Header に Referer を設定したかった。
GoogleとかChatgptとか使って調べまくったけど、全然できなくてハマった。

不幸な人を増やしてはいけないと思ったのでSEOが強いQiitaにメモっておきます。

chrome.webRequest.onBeforeRequest.addListener(() => {
    const rules = [
      {
        id: 1,  
        priority: 1,
        action: {
          type: 'modifyHeaders',
          requestHeaders: [
            {
              header: 'Referer',  
              operation: 'set',
              value: 'https://foo.com/'  
            }
          ]
        },
        condition: {
          urlFilter: 'https://bar.com/*' 
        }
      }
    ];
  
    chrome.declarativeNetRequest.updateDynamicRules({
      removeRuleIds: [1], 
      addRules: rules 
    }, () => {
      if (chrome.runtime.lastError) {
        console.error('Failed to set rules: ' + chrome.runtime.lastError.message);
      } else {
        console.log('Rules have been successfully set.');
      }
    });
  },{urls: ["https://bar.com/*"]});

• manifest.json の permissions に webRequest, declarativeNetRequest を忘れず追加する。
• このコードだとリクエスト発生の度にルールを設定するようになっている(開発用)
• リリース版は onStartup, onInstalled のタイミングで addListener すればいいと思う。