ModifyHeaders with UpdateDynamicRules doesn't work on firefox using manifest v3

I'm currently migrating my extension from manifest v2 to manifest v3 which is used to modify headers from HTTP requests.

So I use the declarativeNetRequest.updateDynamicRules from the chrome api that allows to set the rules of my extension.

Here is the doc that I read to implement declarativeNetRequest.updateDynamicRules : https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/

Unfortunately, it has no effect on firefox browser but works perfectly fine on chrome browser with the same code.

Here is my manifest.json (v3) :

{
  "manifest_version": 3,
  "name": "modify-header",
  "short_name": "modify-header",
  "version": "1.0.0",  
  "icons": {
    "38": "assets/icons/icon-off.png"
  },
  "description": "Modify HTTP request ",
  "permissions": [
    "webRequest",
    "storage",
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess",
    "tabs",
    "cookies"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "index.html?#/popup",
    "default_title": "Modify Headers",
    "default_icon": "assets/icons/icon-off.png"
  },
  "options_page": "index.html?#/configuration", // For chrome 
  "background": {
    "service_worker": "serviceWorker.js" // For chrome 
    "scripts" : ["serviceWorker.js"] // For firefox
  }
}

Here is the code running in my serviceWorker.js :

chrome.declarativeNetRequest.updateDynamicRules(
    {
        addRules: [{
            "id": 1,
            "priority": 1,
            "action": {
                "type": "modifyHeaders" as any,
                "requestHeaders": [
                    { "header": "h2", "operation": "set", "value": "v2" },
                    { "header": "h3", "operation": "set", "value": "v3" }
                ] as any
            },
            "condition": {
                "urlFilter": "*",
                "resourceTypes": ["main_frame"] as any
            }
        }],
        removeRuleIds: [1]
    },
).then(() => {
    console.log('Rule has been added !');
}).catch((error) => {
    console.log('error:', error);
});

Here is the result on chrome while inspecting the network :

Here is the result on firefox while inspecting the network :

As you can see on chrome the headers have been added correctly but nothing on firefox.

I also try to use the "browser api" from firefox like so :

browser.declarativeNetRequest.updateDynamicRules(
    {
        addRules: [{
            "id": 1,
            "priority": 1,
            "action": {
                "type": "modifyHeaders" as any,
                "requestHeaders": [
                    { "header": "h2", "operation": "set", "value": "v2" },
                    { "header": "h3", "operation": "set", "value": "v3" }
                ] as any
            },
            "condition": {
                "urlFilter": "*",
                "resourceTypes": ["main_frame"] as any
            }
        }],
        removeRuleIds: [1]
    },
).then(() => {
    console.log('Rule has been added browser !');
}).catch((error) => {
    console.log('error:', error);
});

But it doesn't change anything in that case.

Here is my set-up :

manifest : version 3

chrome : version 113

firefox : version 114

firefox developper edition : version 115

PS:

I read on the net that maybe the network console on firefox doesn't display the modified headers. So, the headers have been changed but just not display. But it's not correct in my case because the behavior of my extension change according to the headers.

The action "block" works perfectly

Turns out it's not a bug but a normal behavior from firefox.

The browser doesn't grant host permissions automatically so you have to allow them manually by right click on the icon of your extension.

You can see the full explanation and the solution in this article :

https://discourse.mozilla.org/t/modifyheaders-with-updatedynamicrules-doesnt-work-on-firefox-using-manifest-v3/120530/2