Multiple content pages not support

[rosendolu]

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Add another content pages
2. npm run build
3. Load the new extension ,and you will see the errors

Expected behavior
Works normally

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Mac, Window, Linux] Mac
• Browser [e.g. chrome, firefox] hrome
• Node Version [e.g. 18.12.0] v18.17.0

Additional context
When only one content pages, after build ,it works well ,and without any import script

But when multiple content pages added ,the __vitePreload script came to be imported using import,and browser not allowed that.I think it might be the rollups default behavior,but did`t found a way out

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[Jonghakseo]

The current manifest configuration can only support one content script, but let's make it better! You can modify your own build settings and manifest settings to load more than one content script.

I'll try to make it easier to do this in Boilerplate, but I don't think it's a high priority.

[rosendolu]

The current manifest configuration can only support one content script, but let's make it better! You can modify your own build settings and manifest settings to load more than one content script.

I'll try to make it easier to do this in Boilerplate, but I don't think it's a high priority.

yeah,after several attempts, I solved this problem using acustom plugin.
In short, i extract the __vitePreload module code and inject into root content pages

// utils/plugins/inline-vite-preload.ts
export default function inlineVitePreloadScript() {
  let __vitePreload = '';
  return {
    name: 'replace-vite-preload-script-plugin',
    async renderChunk(code, chunk, options, meta) {
      if (!/content/.test(chunk.fileName)) {
        return null;
      }
      if (!__vitePreload) {
        const chunkName = Object.keys(meta.chunks).find(key => /preload/.test(key));
        const modules = meta.chunks[chunkName].modules;
        __vitePreload = modules[Object.keys(modules)[0]].code;
      }
      return {
        code: __vitePreload + code.split(`\n`).slice(1).join(`\n`),
      };
    },
  };
}

// vite.config.ts
import inlineVitePreloadScript from './utils/plugins/inline-vite-preload';
...,
plugins:[
    ...
    inlineVitePreloadScript()
]

[nggonzalez]

@Jonghakseo appreciate all the work on the boilerplate, it's been really helpful to use. FWIW, I also need to support multiple content scripts as the extension I'm building has different functionality by domain and I'm trying to keep the permissions as minimal as possible to start and the code modular.

Adding a heads up/pointer to this issue in the README may be helpful a short-term solution.

@rosendolu Thanks for posting the fix!

[ghj7211]

@rosendolu this still works like a charm. Thanks!

[Jonghakseo]

@all-contributors please add @rosendolu for code

[allcontributors]

@Jonghakseo

I've put up a pull request to add @rosendolu! 🎉