popup.html file not included inside chrome extension build using vite

Viewed 55

I'm using this github cli plugin to scaffold mv3 chrome extensions using vue and vite.

The template is created correctly and I'm able to work on it, but I have a problem when I want to use the chrome.window.create or chrome.tabs.create, when I run the build command the final folder will not contain the popup.html file, it will be bundled only if is used inside the manifest.js file that is used to generate the build

This is the manifest configuration

import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  name: '',
  description: '',
  version: '1.0.0',
  manifest_version: 3,
  icons: {
    16: 'img/logo-16.png',
    32: 'img/logo-34.png',
    48: 'img/logo-48.png',
    128: 'img/logo-128.png',
  },
//If I uncomment popup will be included but tabs and popup windows will not work
  action: {
    // default_popup: 'popup.html',
    // default_icon: 'img/logo-48.png',
  },
  //options_page: 'options.html',
  background: {
    service_worker: 'src/background/index.js',
    type: 'module',
  },
  content_scripts: [
    {
      matches: ['http://*/*', 'https://*/*'],
      js: ['src/content/index.js'],
    },
  ],
  host_permissions: [
    'https://*.herokuapp.com/*'
  ],
  web_accessible_resources: [
    {
      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
      matches: [],
    },
  ],
  permissions: [
    'tabs',
    'gcm',
    'identity',
  ],
  oauth2: {
    "client_id": "...cd.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  }
})

And this is the vite code I have

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

import manifest from './src/manifest.js'

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

  return {
    build: {
      emptyOutDir: true,
      outDir: 'build',
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/chunk-[hash].js',
        },
      },
    },
    plugins: [crx({ manifest }), vue()],
  }
})

How I can fix the build to include the popup.html page or any custom html page I can need?

0 Answers
Related