Popup cannot show properly

[yujinlin0224]

Summary

Popup cannot show properly, with Uncaught TypeError: can't access property "accept", (void 0) is undefined error, same error to https://github.com/aklinker1/vite-plugin-web-extension/issues/99 but not sure is related or not

Reproduction

https://github.com/aklinker1/vite-plugin-web-extension/tree/main/packages/demo-vue

https://user-images.githubusercontent.com/11353779/233687598-56fa9678-1d81-47c6-aeca-0e7d0ab3e260.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

[yujinlin0224]

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:

1. I add "yaml": "^2.2.1" dev dependency directly to demo-vue
2. I created web-ext.config.yaml file in dir of demo-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 in about:config page:

   • devtools.debugger.remote-enabled to true
   • devtools.chrome.enabled to true
   • devtools.debugger.prompt-connection to false

3. 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()],
         },
       }),
     ],
   });

[yujinlin0224]

Just test on Chromium-based browser llike Edge, same problem, content works but popup not.

https://user-images.githubusercontent.com/11353779/233808183-a2d3ddde-428d-423a-9635-883a406a99d9.mp4

[yujinlin0224]

@aklinker1, could you please let me know if you have been able to reproduce the issue?

[aklinker1]

I have not yet, sorry. I was busy last week. I'll try and get to it today or tomorrow.

[aklinker1]

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.

[aklinker1]

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

[aklinker1]

Also, make sure to remove the vue plugin from your scriptViteConfig:

- scriptViteConfig: {
-   plugins: [vue()],
- },

This is no longer needed.

[yujinlin0224]

I think this issue is fixed, but I have another issue that popup menu's style seems not loaded properly in chromium-based browser, I will open another issue about this.

[aklinker1]

Awesome, glad it's fixed. I'll get the PR merged, publish an update, and close this issue.

[aklinker1]

Released in v3.0.7