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:
- Pin the extension icon to the toolbar.
- Go to What HTTP Headers is my browser sending?
- You’ll notice that the headers h2 and h3 aren’t listed.
- 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”.
- 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)
- 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 