Migrating webRequest to declarativeNetRequest - google-chrome

Question

Hi I was using webRequest in manifest V2 , I started getting below error
'webRequestBlocking' requires manifest version of 2 or lower.
So I am trying to convert my below existing code to declarativenetrequest
var responseListener = function (details) {
var rule = {
name: "Access-Control-Allow-Origin",
value: "*",
};
details.responseHeaders.push(rule);
var rule1 = {
name: "Access-Control-Allow-Methods",
value: "GET, PUT, POST, DELETE, HEAD, OPTIONS",
};
details.responseHeaders.push(rule1);
return { responseHeaders: details.responseHeaders };
};
chrome.webRequest.onHeadersReceived.addListener(
responseListener,
{
urls: [
"https://example.com/*",
"*://*.example1.com?test",
],
},
// extraInfoSpec
["blocking", "responseHeaders", "extraHeaders"]
);
So i tried replacing to chrome.declarativeNetRequest.onHeadersReceived.addListener(
And I got Uncaught TypeError: Cannot read properties of undefined (reading 'addListener').Can some one help me how the current function can be migrated to declarativeNetRequest.

Answer 1

The error you're seeing is because declarativeNetRequest provides a different API to webRequest and there are some additional steps for migration. You can learn more about the API in general here: https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/
For your use case, you can actually setup a rule declaratively in the manifest without needing to call any APIs at all! This is one of the benefits of the new API in general, which tries to move towards declarative rules rather than giving extensions access to web requests in-flight.
To start with, add the following to your extension manifest:
Copyright 2023 Google LLC.
SPDX-License-Identifier: Apache-2.0
"declarative_net_request" : {
"rule_resources" : [{
"id": "ruleset_1",
"enabled": true,
"path": "rules_1.json"
}]
},
"permissions": [
"declarativeNetRequest"
],
"host_permissions": [
"https://example.com/*"
]
This defines a new "ruleset" and also adds the required API and host permissions.
You can then create the file rules_1.json and put the desired rule inside:
Copyright 2023 Google LLC.
SPDX-License-Identifier: Apache-2.0
[
{
"id" : 1,
"priority": 1,
"action": {
"type": "modifyHeaders",
"responseHeaders": [
{ "header": "Access-Control-Allow-Origin", "operation": "set", "value": "*" },
{ "header": "Access-Control-Allow-Methods", "operation": "set", "value": "GET, PUT, POST, DELETE, HEAD, OPTIONS" }
]
},
"condition" : {
"urlFilter": "||example.com"
}
}
]
This adds the two headers as required. You can then reload your extension and should be good to go!
As a note, you won't see these headers reflected in Dev Tools. This is a bug which will hopefully be fixed in the future: https://bugs.chromium.org/p/chromium/issues/detail?id=1247400
If you want to check it's working, going to https://example.com and running the following in the console will output a list of headers, including the ones added by your extension: [...(await fetch("https://example.com")).headers].