search

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.6k stars 177 forks source link

import of images in content_scripts are resulting in 404 #863

Open lukasfarina opened 5 months ago

lukasfarina commented 5 months ago

Build tool

Vite

Where do you see the problem?

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'

Captura de Tela 2024-02-06 às 11 51 39

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 commented 4 months ago

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

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

Toumash commented 3 months ago

<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 commented 1 month ago

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