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