url('~@/assets/...') in css doesn't work after build

[franciscolourenco]

Related: https://github.com/vuejs/vue-cli/issues/4197

One way of fixing this would be to use the filename option, or to place the flatten the structure at build time.

[adambullmer]

While doing some hunting around, I happened upon this idea from some best practices with using the extension ID. Put your static assets somewhere in your public/ directory and reference them with the dynamic absolute URL to your extension:

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

The downside is you're now just direct copying over your images into the build instead of letting webpack handle them.

[franciscolourenco]

You can fix the plugin by omitting the slash in the key:

        popup: {
            entry: 'src/popup/popup.js',
            template: 'src/popup/popup.html',
        },
        options: {
            entry: 'src/options/options.js',
            template: 'src/options/options.html',
        },
        standalone: {
            entry: 'src/standalone/standalone.js',
            template: 'src/standalone/standalone.html',
        },

This way the entry files will not be nested inside direcroties and everything works fine. EDIT: manifest.json also needs to be updated

[adambullmer]

The plugin only templates out the names of the pages. You are free to edit the page names and their corresponding manifest.json entries as you see fit, certainly to help fix an error that you're encountering.

I've been stewing on this and a few other suggestions that would potentially make breaking changes for people. I think you're right here about the page solution, and you so helpfully pointed out some file name inconsistencies. I'm going to start compiling a list of these breaking changes so that I can make them all at once, and maybe lead to a real 1.0 release.