How to add new pages?

[d-bucur]

I want to add a new html page to the distributable, accessible for example at /extension-id/dist/custom/index.html

How to do this? I guess I have to modify some of the configuration scripts, but I'm not sure which.

[sheeehy]

You can add additional pages by creating an HTML file in the public directory. Make a new directory under the public directory and call it custom. In this custom directory, create a new file called index.html, then add your code.

The public directory in Vite is directly copied to the dist folder during build, preserving the directory structure.
This will result in a distributable at /dist/custom/index.html after you build the project, and it will be accessible at /custom/.

If you want to use Vue or React components within this page, you will have to modify the Vite configuration to handle multiple HTML files like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: 'index.html',
        custom: 'custom/index.html'
      }
    }
  }
})

[d-bucur]

Thanks, but this doesn't work as reliably as I expected. Things in public/ don't get copied at all in dev. And in build they get duplicated in /dist/ , /dist/background and /dist/contentScripts.

[sheeehy]

You could try the rollup plugin,

 npm install rollup-plugin-copy

And then add it to the config file.

import copy from 'rollup-plugin-copy';

export default {
  plugins: [
    copy({
      targets: [
        { src: 'public/custom/*', dest: 'dist/custom' },
      ],
      hook: 'writeBundle' 
    })
  ]
}

[d-bucur]

I tried this but it has the same problem as above. In build it works fine but in dev there is no dist/custom folder so I can't reliably reference the files. Not sure why it is different between the two.