V4 - create devtools_page example with vite

[nirtamir2]

Hi
Thanks for building this amazing plugin!
I'm trying to create a browser extension with vite that exposes a devtools page (and I will render the UI in react inside).
I created the manifest with index.html entry.
The index.html import main.ts that should create the page in the panel

import Browser from "webextension-polyfill";
import devtoolsPanelPage from "./devtools-panel-page.html";

async function createPanel() {
  const url = Browser.runtime.getURL(devtoolsPanelPage as string);
  const { onShown } = await Browser.devtools.panels.create(
    "My devtools title",
    "",
    url
  );
  onShown.addListener(() => {
    //
  });
}

But this is not working for me.

Following #187 - I want to bundle and create another page for the devtools panel - but I cannot import HTML (the plugin does not resolve it)

I would like to see an example just to make the devtools page render something with react or add a description in the docs/readme.

Thank you :)

[jacksteamdev]

@nirtamir2 Awesome PR archeology! HTML imports interfered with Vite's HTML pipeline, so I removed them in #200. I've redacted that part of #187. Thanks for bringing it to my attention! Sorry for the inconvenience.

Vite supports multiple HTML pages; that's what I would try: Multi-Page App | Vite

I'll release an article for creating a devtools extension soon! Subscribe to this post for a link here when it's out.

[nirtamir2]

Thanks! I will try it 👍

[jacksteamdev]

@nirtamir2 #233 reported some trouble with HMR with this technique. If you run into problems, please create an issue 🙏 That would be a big help

[nirtamir2]

It works. Here is my vite.config.ts:

{
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "devtools-page.html"),
        devtools: resolve(__dirname, "devtools-panel.html"),
      },
    },
  },
}

While in manifest I have

  devtools_page: "devtools-page.html",

The devtools-panel.html does not do work. I render the devtools in the main.tsx script that the devtools-page.html import.

And in main.tsx

 const url = "/devtools-panel.html";
  const { onShown } = await Browser.devtools.panels.create(
    "Name",
    "assets/images/logo-32.png",
    url
  );

  onShown.addListener((window) => {
    handleRenderDevtools(window); // I start my react app and mount it to the window.
  });