import of images in content_scripts are resulting in 404

[lukasfarina]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

When trying to import an image asset in a content script, the path entered is relative to the website and not the extension folder.

Reproduction

import Logo from '../path/logo.png'

Logs

logo.png:1 

       GET https://web.whatsapp.com/src/content_scripts/whatsapp/components/logo.png 404 (Not Found)
Image (async)
commitMount @ react-dom_client.js:8060
commitLayoutEffectOnFiber @ react-dom_client.js:16622
commitLayoutMountEffects_complete @ react-dom_client.js:17499
commitLayoutEffects_begin @ react-dom_client.js:17488
commitLayoutEffects @ react-dom_client.js:17440
commitRootImpl @ react-dom_client.js:18844
commitRoot @ react-dom_client.js:18768
finishConcurrentRender @ react-dom_client.js:18297
performConcurrentWorkOnRoot @ react-dom_client.js:18211
workLoop @ react-dom_client.js:193
flushWork @ react-dom_client.js:172
performWorkUntilDeadline @ react-dom_client.js:380
Show 12 more frames

System Info

none

Severity

annoyance

[b5414]

<img src="${chrome.runtime.getURL(src)}" />

https://crxjs.dev/vite-plugin/getting-started/vanilla-js/add-content-script#get-the-right-url

[Toumash]

<img src="${chrome.runtime.getURL(src)}" />

https://crxjs.dev/vite-plugin/getting-started/vanilla-js/add-content-script#get-the-right-url

I was trying the same thing in january this year in popup.js it works fine, but not in content_script. I've ended up hosting the images on my website and loading by https uri

[Toumash]

I believe this one should be closed as getURL is the solution @jacksteamdev

[Ivanca]

chrome.runtime.getURL is undefined when running on JavaScript context MAIN instead of ISOLATED , maybe a workaround should be provided by this plugin (e.g. scoped variable) but perhaps that's outside the scope of this project, see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld

[Toumash]

chrome.runtime.getURL is undefined when running on JavaScript context MAIN instead of ISOLATED , maybe a workaround should be provided by this plugin (e.g. scoped variable) but perhaps that's outside the scope of this project, see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld

if youre running in main world then you need the extension id - that need request_web_permissions in manifest i guess. Topic of using the extension id in mainworld is a work in progress. Perhaps you could pass the extension id or the url of image from the isolated world? Some work done #851 and #695