I have built a web extension for Chrome and Firefox. After that, I wanted to be able to use it on Safari as well.

For that, I used the xcrun command with the option safari-web-extension-converter.

Now, there is a strange problem which I don’t find any answer on the internet.

For some images that I put on the web extension contentscript code with the tag <img src="browser.runtime.getURL("images/my-image.svg")">, their src values are replace with “webkit-masked-url://hidden/”, causing the image to be displayed with a little blue square with an interrogation mark inside.

For more detailed, I have the impression that it replaces all images src with the url “webkit-masked-url://hidden/”, but for some of them, safari allows them to be queried. Indeed, I got these messages in the console when I open my extension on a page :

The page at https://fr.wikipedia.org/wiki/Test was allowed to display insecure content from webkit-masked-url://hidden/.

Causing these specifics images to be rendered properly.
On top of that, if I copy/paste the not-working <img src="browser.runtime.getURL("images/my-image.svg")"> just next to a working image, this time the supposed not-working image is rendered correctly.

I have of course declared my images in the manifest.json inside the property web_accessible_resources.
They are all under the the images folder at the root of my project, and here is how I declared them :

"web_accessible_resources": [
    "images/my-image.svg"
]

My manifest version is version 2 as for now.

And all the images are in the Xcode build under the Shared (Extension)/Resources/images package.

I tried to see if putting images with css class and property background-image works and with this solution it actually works. But i am not really happy with this workaround, I would like to keep the img tag, as it works for some images at least.