Having trouble adding image assets

[evanb2]

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

"vite": "^2.7.2",
"vue": "^3.2.25",
"rollup-plugin-chrome-extension": "^4.0.1-16",

manifest.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

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! Looks like this was an oversight in the most recent rewrite. I think it's a nice feature, so I'm converting this to an issue.

Workaround

Try putting 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

[evanb2]

Nice! AFAICT this also works in development (running vite dev)

[evanb2]

@jacksteamdev Thanks for a speedy response! This plugin is an absolute lifesaver, been trying to migrate from a custom Webpack config to Vite and this was the missing piece.