How to Modify Custom Request Headers in Chrome Extension?
The current “chrome extension” is built on mv3 version, so the approach differs from mv2 version.
📝 How to Implement
👉 Intercepting Requests
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
]
}
}
]
})
...👉 Cancel Interception
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [
RULE_ID
],
addRules: []
})🤗 Issues Found
The above issue can be resolved by adding the corresponding field.