Dev mode doesn't support icons

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.

https://crxjs.dev/vite-plugin

2.71k stars 181 forks source link

Dev mode doesn't support icons #832

Open sublimator opened 9 months ago

sublimator commented 9 months ago

Build tool

Vite

Where do you see the problem?

[X] In the browser
[ ] In the terminal

Describe the bug

Need to detect that using the dev server and tack on the full http url of the dev server to the front of the icon path, otherwise "failure to fetch" when using chrome.action.setIcon

Reproduction

Curses

Logs

No response

System Info

System:
    OS: macOS 14.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 19.53 GB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.1 - ~/.nvm/versions/node/v20.8.1/bin/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.8.1/bin/npm
    pnpm: 8.10.4 - ~/Library/pnpm/pnpm
    bun: 1.0.1 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 116.1.57.47
    Chrome: 119.0.6045.159
    Safari: 17.1
  npmPackages:
    @crxjs/vite-plugin: 2.0.0-beta.21 => 2.0.0-beta.21 
    rollup: ^3.29.4 => 3.29.4 
    vite: 4.4.9 => 4.4.9

Severity

annoyance

sublimator commented 9 months ago

such annoyance, very annoyed

Toumash commented 3 months ago

Please provie a reproduction. What path are you using?

sublimator commented 3 months ago

So long ago I can't even remember now Probably found a workaround Next time I have some time and on laptop will dig this up

Thx

On Sat, 18 May 2024, 7:22 pm Tomasz Dłuski, @.***> wrote:

Please provie a reproduction. What path are you using?

— Reply to this email directly, view it on GitHub https://github.com/crxjs/chrome-extension-tools/issues/832#issuecomment-2118806734, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEAHG6BLUZDS4XKS476HELZC5BW5AVCNFSM6AAAAAA7NWYHV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYHAYDMNZTGQ . You are receiving this because you authored the thread.Message ID: @.***>

ohawkins2 commented 1 month ago

I have the same issue.

Repo steps:

Add a icon png to assets folder 1.png
In the service worker:
```
import icon from "./assets/1.png"
```

chrome.action.setIcon({ path: icon });


This does not work.

When you run a build everything works as expected.

Toumash commented 1 month ago

@ohawkins2 it was working here.

The image tutorial says to use getURL

exact code

import logoPath from './logo.png'

const logo = document.createElement('img')
logo.src = chrome.runtime.getURL(logo)