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

Add-ons Development
#1

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"
  }, 
  "background": { 
    "scripts" : ["serviceWorker.js"]
  }
}

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 browser while inspecting the network :

modify-chrome
modify-chrome1237×534 16.5 KB

Here is the result on firefox browser while inspecting the network :

modify-firefox
modify-firefox586×504 12.2 KB

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

P.S : 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.

P.S (2) : The action “block” works perfectly

Thank you for your help

1 Like
#2

Maybe you’re wondering why nobody’s answered your question.

You posted some code, but I had to make a few changes before I could run it on my computer:
a) Removed all instances of “as any” from the code. Testing plain Javascript code is simpler than testing Typescript code.
b) Added assets/icons/icon-off.png
c) Added index.html

If you post code that people can run without any modifications, you’re much more likely to get an answer. And if you upload a ZIP of your test extension, that’s even better. The people on this forum want to help, but not if they have to do unnecessary work.

The extension adds the headers h2 and h3 when I follow these steps:

  1. Pin the extension icon to the toolbar.
  2. Go to What HTTP Headers is my browser sending?
  3. You’ll notice that the headers h2 and h3 aren’t listed.
  4. You’ll also notice that there’s a blue dot under the extension icon.
    When you hover the mouse cursor over it, you’ll get a tooltip that says:
    “Modify Headers / Permission required”.
    grafik
  5. Right-click the extension icon, and left-click “Always allow on www.whatismybrowser.com” => The blue dot disappears.
    (if you left-click the extension icon, the blue dot also disappears, but it comes back when you reload the page; and the popup opens, but that’s not important here)
    grafik
  6. Reload the page => The headers h2 and h3 are now listed.

In other words, it’s a permission problem.
Chrome: When you load an unpacked extension in developer mode, host permissions are granted automatically.
Firefox: When you load an MV3 extension with “Load temporary add-on”, host permissions are not granted automatically. See Required permissions for core functionality in MV3? How!?

What Mozilla wrote about it:
Extensions button and how to handle permissions in Manifest V3

If you think that this sucks, you’re not the only one.
There’s probably an issue about this on https://bugzilla.mozilla.org/ where you can voice your discontent.

I hope this answers your question :slight_smile:

#3

Thank you for answer.

Indeed, your right I should atleast have posted a code. My bad.

Thank you for your explanations. I have followed the steps and it works now.

Unfortunately, this behavior also happens with signed extensions. That’s not cool.

This is so sad that host permissions are not automatically granted and that we have to allow them on each new pages. But I have found a way to allow host permissions automatically from the settings of the extension. I don’t know if it’s recommended or a good practice. But in my case, it’s a personal extension and for me it’s easiest way to solve my problem. (See the screen below)

firefox-permission