WXT: how to include html to open in popup?

[John Gordon]

I’m trying to open a popup window that references an HTML page from my extension code. This works in crxjs but not in wxt. Here’s my code:

```ts
browser.windows.create({
  url: chrome.runtime.getURL(
        "src/entrypoints/sidePanel/popup/composePopup.html"
      ),
  type: "popup",
  focused: true,
});
```

In crxjs, this worked by simply adding the `composePopup.html` to my Vite configuration. I tried doing the same thing in my `wxt.config.ts` file:

```ts
build: {
  sourcemap: true,
  rollupOptions: {
    input: {
      composePopup: "src/entrypoints/sidePanel/popup/composePopup.html",
    },
  },
},
```

I confirmed that the file is being built and shows up in the .output directory:

```zsh

✔ Built extension in 295 ms                                           9:22:05 AM
  ├─ .output/chrome-mv3/manifest.json                                      1.32 kB
  ├─ .output/chrome-mv3/options.html                                       765 B  
  ├─ .output/chrome-mv3/sidePanel.html                                     705 B  
  ├─ .output/chrome-mv3/src/entrypoints/sidePanel/popup/composePopup.html  734 B  
  ├─ .output/chrome-mv3/src/entrypoints/sidePanel/popup/composePopup.html  734 B  
  ├─ .output/chrome-mv3/src/entrypoints/sidePanel/popup/composePopup.html  734 B  

  ```

(I’m not sure why it’s listed three times, but there’s only one actual file in the `.output` directory.)

However, in wxt, this isn’t working. The popup window throws an error saying the resource couldn’t be found, or I get:

`Uncaught ReferenceError: background is not defined`

This error goes away if I remove the build object from the Vite configuration, restart wxt, and re-add the extension. (More debug output would be helpful here.)

So, what am I doing wrong? How can I properly include this HTML file so I can open it with browser.windows.create in wxt?

[Deco]

Documentation for WXT file structures are available here.

Simply put, they are different to CRXJS in that it follows a strict folder structure, move them to /public/ in your case which should fix what you're trying to do.

Thanks,

Deco

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/83929a68-b0c6-4a53-a95a-1d4301aef7e0n%40chromium.org.

[John Gordon]

Good idea. I’ll check it out. Do you see any issues putting this in the public folder when the html file is actually a React app:

popup

├── App.tsx

├── composePopup.html

└── main.tsx

[John Gordon]

Actually, Aaron pointed me the listed vs unlisted documentation. I think this should solve my problem.

[Deco]

No worries, I was going to respond that including the HTML file inside the public folder would mean it's not automatically linked to React, hope you manage to get it solved.

Cheers,

Deco