I'm currently utilizing a github CLI plugin found at this link to set up mv3 chrome extensions using vue and vite.
The initial template is properly set up and I can work on it without any issues. However, I encounter a problem when trying to utilize chrome.window.create
or chrome.tabs.create
. When I execute the build command, the final folder does not contain the popup.html
file unless it's used within the manifest.js
file that is utilized for generating the build.
Below is the configuration in the manifest:
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',
},
//Uncommenting popup inclusion causes tabs and popup windows to malfunction
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"
]
}
})
Here's the vite code snippet:
import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import vue from '@vitejs/plugin-vue'
import manifest from './src/manifest.js'
// Vite 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()],
}
})
Is there a way to ensure the build includes the popup.html page or any other custom HTML page that may be required?