Having trouble adding image assets

[jacksteamdev]

Discussed in https://github.com/extend-chrome/rollup-plugin-chrome-extension/discussions/225

^{Originally posted by **evanb2** March 3, 2022} Didn't want to create an issue cause I'm not 100% I have my project setup right, but none of my images are getting bundled into the build. `package.json` ```json "vite": "^2.7.2", "vue": "^3.2.25", "rollup-plugin-chrome-extension": "^4.0.1-16", ``` `manifest.json` ```json "action": { "default_popup": "src/popup/index.html", "default_icon": { "16": "src/assets/images/logo_16.png", "32": "src/assets/images/logo_32.png", "48": "src/assets/images/logo_48.png", "128": "src/assets/images/logo_128.png" } }, "icons": { "16": "src/assets/images/logo_16.png", "32": "src/assets/images/logo_32.png", "48": "src/assets/images/logo_48.png", "128": "src/assets/images/logo_128.png" }, "web_accessible_resources": [ { "resources": [ "src/assets/images/Logo-Chrome@2x.svg", "src/assets/images/Logo-Chrome-Tab@2x.svg" ], "matches": ["https://*/*"] } ] ``` `vite.config.js` ```js import vue from '@vitejs/plugin-vue' import { resolve } from 'path' import { defineConfig } from 'vite' import { chromeExtension } from 'rollup-plugin-chrome-extension' import manifest from './manifest.json' // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': resolve(__dirname, 'src'), }, }, plugins: [chromeExtension({ manifest }), vue()], }) ``` Folder structure: ``` - src/ |- assets/ |- images/ - logo_16.png - logo_32.png - logo_48.png - logo_128.png - manifest.json - vite.config.js ``` Docs say this is suppose to happen automagically from the manifest file. I'm not seeing any issues regarding this so assuming I'm just missing something lol. Thanks for any help!

[jacksteamdev]

@evanb2 Thanks for reporting this! This was an oversight in the most recent rewrite. I think it's a nice feature, so I'm converting this to an issue.

Docs for v4 are WIP, there are some API differences. In the meantime, I'm writing an article with a more complex config example (typescript manifest, public folder, etc).

One key difference is that v4 won't copy assets from web_accessible_resources. You can declare web accessible resources, but if you want them copied, you can put those resources in the public folder.

Workaround

Try putting manifest images in the public folder for now, that should work in production. Once #224 lands it will work in development.

// manifest.json
{
  "icons": {
    "16": "assets/images/logo_16.png",
    "32": "assets/images/logo_32.png",
    "48": "assets/images/logo_48.png",
    "128": "assets/images/logo_128.png"
  },
}

- src/
- public/
  |- assets/
    |- images/
       - logo_16.png
       - logo_32.png
       - logo_48.png
       - logo_128.png
- manifest.json
- vite.config.js

[heathsnee]

I have same issue with icons also on top of that if i include script in web_accessible_resources it does not get copied

    web_accessible_resources: [
        {
            matches: ['<all_urls>'],
            resources: ['src/lib.ts'],
        },
    ],

- src/
  - lib.ts
- manifest.json
- vite.config.ts

Also later how would i reference this resources using chrome.runtime.getURL('lib.js') ? Since the file name differs based on hash from build

[jacksteamdev]

Also later how would i reference this resources using chrome.runtime.getURL('lib.js') ? Since the file name differs based on hash from build

@heathsnee Good point. I can imagine this pattern being useful for content scripts that inject a script into the main page execution context. Is this what you are doing, or do you have another use case?

[heathsnee]

yes exactly what i am trying to do

[jacksteamdev]

259 now copies manifest assets (e.g., icons); web_accessible_resources are coming soon

[kansson]

@jacksteamdev the auto-copying for manifest assets doesn't seem to work for me. I'm on version 4.0.1-18 with the same file structure as OP.

[kansson]

Hello again @jacksteamdev, is the auto-copying feature not released yet? But will be in the next release, according to your reply here https://github.com/extend-chrome/rollup-plugin-chrome-extension/issues/270#issuecomment-1087890718? Thanks!

[jacksteamdev]

@essarn This is fixed! :rocket:

[jacksteamdev]

If you haven't already, please migrate to @crxjs/vite-plugin so you can get the latest updates!

Migration instructions here: https://dev.to/jacksteamdev/rpce-is-moving-to-crxjsvite-plugin-2lmi