popup.html not bundled in production

[realrecordzLab]

How I can force the build process to include popup.html or newtab.html page or any other html page my extension need? When I comment the default_action the popup page will be not included into the dist folder after build.

[guocaoyi]

How I can force the build process to include popup.html or newtab.html page or any other html page my extension need? When I comment the default_action the popup page will be not included into the dist folder after build.

so two questions:

1. popup.html do not work
2. newtab.html(and other html page) not included into dist

replied of questions below:

1. which boilerplate you selected?
2. pages( newtab \ devtool) are not supported yet.

create-chrome-ext will fix this in version 0.7.0

[realrecordzLab]

How I can force the build process to include popup.html or newtab.html page or any other html page my extension need? When I comment the default_action the popup page will be not included into the dist folder after build.

so two questions:

1. popup.html do not work
2. newtab.html(and other html page) not included into dist

replied of questions below:

1. which boilerplate you selected?
2. pages( newtab \ devtool) are not supported yet.

create-chrome-ext will fix this in version 0.7.0

I've used the vue javascript template

[realrecordzLab]

I've readed the docs of the crx.js plugin and I've found a little trick to include extra web pages inside the packed extension. As described into the docs, to add a page to the dev mode and to the build the following code need to be added to the vite.config.js file

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        popup: 'pages/popup.html',
      },
    },
  },
})

It will be great if the newtab.vue file can be included into the build using this way, at the moment I'm not sure how to proceed to achive this, but I've successfully included the popup.html page without declaring it inside the manifest file

[Ambushfall]

For the time being, there's a way I use to auto generate pages.

src\read_pages_folder.ts

import globSync from 'glob';

const pages = await globSync('pages/*.html')

const arrayKeyValuePairs = pages.map(file => [file.split('\\').slice(-1).toString().split('.html').join(''), file])

export const config = Object.fromEntries(arrayKeyValuePairs)

vite-config.ts

//@ts-ignore
import {config} from './src/read_pages_folder'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {

  return {
    build: {
      emptyOutDir: true,
      outDir: 'build',
      rollupOptions: {
        input: config,
        output: {
          chunkFileNames: 'assets/chunk-[hash].js',
        },
      },
    },

    plugins: [crx({ manifest }), react()],
  }
})

Afterwards just make a directory pages (Outside of src), and add html files to it, test build :D

Note: This is only for additional pages that will be used as links in the extension

[guocaoyi]

19