I am venturing into the world of creating my initial browser extension for Firefox. Currently, I am testing it in Firefox Dev v120. I have added an image to the 'images' directory of the extension and have specified "web_accessible_resources" in my manifest file. However, the image refuses to load.
Initially, I was using manifest version 2, but I also experimented with manifest version 3 after reading Mozilla's guidelines here.
Unfortunately, when using manifest version 2, the image does not display. On the other hand, if I switch to manifest version 3 and include "matches", the extension encounters an error.
This is a snippet from my manifest.json (version 2)
{
"manifest_version": 2,
"name": "Newscorp",
"version": "1.0",
"description": "An attempt to replace the logos of Newscorp news sites with more accurate ones",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.heraldsun.com.au/*"],
"js": ["newscorp.js"]
}
],
"web_accessible_resources": [
"images/Herald-Scum.png"
]
}
If I were to use manifest version 3, the web resources section would look like this:
"web_accessible_resources": [
{
"resources": ["Herald-Scum.png"],
"matches": ["/images/*"]
}
]
Below is the code snippet of my JavaScript file
document.body.style.border = "2px solid red";
var head= document.getElementsByClassName("header_link_image")[0];
head.src = "images/Herald-Scum.png";
Upon debugging in the browser (using version 2 manifest), I notice that the image source has been replaced: https://i.sstatic.net/XeteQ.png
However, it seems like the extension is attempting to load the image from the website URL instead of its own extension directory, resulting in a 404 error as the image doesn't exist on the website: https://i.sstatic.net/UKVVa.png