RoboticWater commented 5 months ago

Build tool

Vite

Where do you see the problem?

[ ] In the browser
[X] In the terminal

Describe the bug

When creating a notification using an imported image asset in a background script, I get the error Uncaught (in promise) Error: Unable to download all specified images. I'm using chrome.runtime.getURL(reactLogo) to get the asset URL, and if I put that URL in the browser, I'm able to access the image, so I doubt the problem is the asset itself.

This error doesn't occur when I provide a URL to a non-cors protected image somewhere on the internet, so it seems to just be an issue loading assets from within the app.

Reproduction

Background script:

import reactLogo from "./assets/react.svg";

chrome.notifications.create(`notification-${Date.now()}`, {
  type: "basic",
  iconUrl: chrome.runtime.getURL(reactLogo),
  title: "Popup.js",
  message: "Hello from popup.js!",
});

Manifest:

{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "permissions": ["storage", "notifications", "tabs"],
  "background": {
    "service_worker": "src/background.ts",
    "type": "module"
  },
  "action": { "default_popup": "index.html" }
}

Logs

Uncaught (in promise) Error: Unable to download all specified images.
    at extensions::notifications:122:7
    at Object.oncomplete (extensions::notifications:95:9)
    at Object.onerror (extensions::imageUtil:124:17)
    at extensions::imageUtil:62:17

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 11.95 GB / 31.75 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (124.0.2478.80)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

Toumash commented 5 months ago

Works just fine for .png but does not for .svg. Windows 11 Node 20 Chrome 125.

    "vite": "^5.2.11",
    "@crxjs/vite-plugin": "^2.0.0-beta.23",
    "@vitejs/plugin-react": "^4.2.1",

import reactLogo from '../../img/logo.png';
chrome.notifications.create(`notification-${Date.now()}`, {
  type: 'basic',
  iconUrl: chrome.runtime.getURL(reactLogo),
  title: 'Popup.js',
  message: 'Hello from popup.js!',
});

Works just fine

But .svg didnt work

import reactLogo from '../../img/logo.svg';
chrome.notifications.create(`notification-${Date.now()}`, {
  type: 'basic',
  iconUrl: reactLogo,
  title: 'Popup.js',
  message: 'Hello from popup.js!',
});

Update

When you look at the dist/ folder you will notice they are not even copied into the build. Even when using vite-svg-loader

Its not even funny. It does not work even if you use manual string paths and put the .svg file into the assets folder. Chrome easily displays it but the service worker wont download it.

chrome.notifications.create(`notification-${Date.now()}`, {
  type: 'basic',
  iconUrl: chrome.runtime.getURL('/assets/logo.svg'),
  title: 'Popup.js',
  message: 'Hello from popup.js!',
});

Conclusion

It is clearly not a problem with crxjs. First someone has to say how to use .svgs with chrome notifications (maybe it is not possible).

All Google demos are using .pngs https://developer.chrome.com/docs/extensions/samples?api=notificationscreate

Toumash commented 4 months ago

Did it work? Can we close the issue @RoboticWater

RoboticWater commented 4 months ago

@Toumash yes, that worked, you can close the issue.