Popup cannot show properly
Closed this issue · 10 comments
Summary
Popup cannot show properly, with Uncaught TypeError: can't access property "accept", (void 0) is undefined
error, same error to #99 but not sure is related or not
Reproduction
https://github.com/aklinker1/vite-plugin-web-extension/tree/main/packages/demo-vue
bandicam.2023-04-22.00-17-17-047.mp4
Environment
(Sorry that envinfo
is failed to run with 'wmic' is not recognized as an internal or external command
error, probably MS is removed wmic in Windows 11.)
Microsoft Windows 11 Pro 22H2 64-bit (10.0.22621.1555)
npm: 9.5.0
node: 18.15.0
pnpm: 8.3.1
Run demo-vue
project with Firefox Dev Edition 113.0b6 64-bit
I made some small changes to make demo-vue
can run in Firefox, not sure it would effect this issue or not but I describe it:
- I add
"yaml": "^2.2.1"
dev dependency directly todemo-vue
- I created
web-ext.config.yaml
file in dir ofdemo-vue
args: - -start-debugger-server browserConsole: true firefox: C:\Program Files\Firefox Developer Edition\firefox.exe firefoxProfile: C:\Users\yujin\AppData\Roaming\Mozilla\Firefox\Profiles\bldd8ese.plugin-container chromiumProfile: C:\Users\yujin\AppData\Local\Microsoft\Edge\User Data\Profile 1 keepProfileChanges: true profileCreateIfMissing: true
bldd8ese.plugin-container
is a profile I already created, with below flags set inabout:config
page:devtools.debugger.remote-enabled
totrue
devtools.chrome.enabled
totrue
devtools.debugger.prompt-connection
tofalse
- I modified
vite.config.ts
to:import path from "path"; import fs from 'node:fs' import { defineConfig } from "vite"; import browserExtension from "vite-plugin-web-extension"; import vue from "@vitejs/plugin-vue"; import YAML from 'yaml' const webExtConfig = YAML.parse(fs.readFileSync('web-ext.config.yaml', 'utf8')) as Object function root(...paths: string[]): string { return path.resolve(__dirname, ...paths); } export default defineConfig({ root: "src", build: { outDir: root("dist"), emptyOutDir: true, }, plugins: [ vue(), browserExtension({ browser: 'firefox', webExtConfig, scriptViteConfig: { plugins: [vue()], }, }), ], });
Just test on Chromium-based browser llike Edge, same problem, content works but popup not.
bandicam.2023-04-23.05-54-40-340.mp4
@aklinker1, could you please let me know if you have been able to reproduce the issue?
I have not yet, sorry. I was busy last week. I'll try and get to it today or tomorrow.
I have not been able to repro with your setup, but I was able to on another, very large, closed source project.
After sleeping on it, I might have a solution. I'll update this thread when I give it a go, probably later today.
Alright, I have a test version, it is working on the project that I could repro this error on.
@yujinlin0224 Can you try out v3.0.7-alpha1
? It's the available using the next
label on NPM:
pnpm i vite-plugin-web-extension@next
Or if you're still testing with the packages/demo-vue
app, pull in the code from this PR and run pnpm dev
Also, make sure to remove the vue plugin from your scriptViteConfig
:
- scriptViteConfig: {
- plugins: [vue()],
- },
This is no longer needed.
Awesome, glad it's fixed. I'll get the PR merged, publish an update, and close this issue.