How can I configure exporting the compiled files to the public folder?

[MikkelBirkeholm]

First of all, thanks for making this!

I am trying to wrap my head around how I can transpile jsx files to the public folder.

I am having a hard time choosing the right words to explain this, but essentially, what I want to do is:

• Write a dashboard page using React
• Open this dashboard in a new tab when clicking a button
• This button is located in my popup.html

I can make it work when using only vanilla, since I can just place the files in the right places.

Where can I learn more about how to go about this?

All the best

[MikkelBirkeholm]

Alright, of course things start to click right after posting a question like this...

To anyone else stumbling upon this, the answer was to include the files in vite config file.

In my case, it was as following:

plugins: [
    react(),
    webExtension({
      manifest: generateManifest,
      additionalInputs: ["src/dashboard.html"], // <---- Included files here
    }),
  ],

[aklinker1]

Looks like you've figured it out, but I'm gonna elaborate for anyone else that stumbles across this discussion.

---

Entrypoints, like HTML files and content scripts, end up relative to Vite's root in the final output directory. The plugin itself tries to be as un-opinionated as possible about the directory structure so you can customize it however you like. So lets start there.

Personally, I prefer a flat directory structure inside a src directory, similar to a nuxt or nextjs project.

project/
├─ src/
│  ├─ assets/
│  │  └─ ...any images or CSS files imported by JS files
│  ├─ background/
│  │  └─ ...background script only files
│  ├─ components/
│  │  └─ ...react components
│  ├─ hooks/
│  │  └─ ...custom reusable hooks
│  ├─ layouts/
│  │  └─ ...layout components
│  ├─ pages/
│  │  └─ ...components used as the entrypoint for routes (like react-router)
│  ├─ utils/
│  │  └─ ...utils and helper functions
│  ├─ background.ts
│  ├─ dashboard.html
│  ├─ popup.html
│  └─ manifest.json
└─ vite.config.ts

With a project structure like this, you can choose where to put your Vite root, . (default) or ./src/, each results in a different directory structure in your dist directory:

// vite.config.ts - root set to .
export default defineConfig({
  plugins: [
    webExtension({
      manifest: "src/manifest.json",
    }),
  ],
});

This would result in:

dist/
├─ src/
│  ├─ popup.html
│  └─ dashboard.html
└─ manifest.json

export default defineConfig({
  root: "src",
  build: {
    outdir: path.resolve("dist"),
    emptyOutdir: true,
  },
  plugins: [
    webExtension({
      // manifest option defaults to "<viteRoot>/manifest.json", so it can be excluded
    }),
  ],
});

This would result in:

dist/
├─ popup.html
├─ dashboard.html
└─ manifest.json

The only files that really matter in the output directory are your entrypoints. The manifest will always be under <outDir>/manifest.json.

Personally, I prefer the second configuration, with the vite root set to "src" because it provides a nicer output directory when using a src directory - the extra src/ directory in the first configuration is exposed through the URL when opening the dashboard, and I prefer to avoid that.

As for including additional files to be built, you are correct. If you're not going to list the dashboard.html file as the options page, you can add it to the additionalInputs option, along with any other files not listed in the manifest.

export default defineConfig({
  root: "src",
  build: {
    outdir: path.resolve("dist"),
    emptyOutdir: true,
  },
  plugins: [
    webExtension({
      additionalInputs: ["dashboard.html"],
    }),
  ],
});

At this point, setting up links between your pages is easy. On your popup, HREFs can be generated using browser.runtime.getURL("/dashboard.html"). getURL resolves the full path of a file in your dist directory.

const Popup: React.FC = () => {
  return (
    <a href={browser.runtime.getURL('/dashboard.html')} target="_blank">Dashboard</a>
  );
}

You may want to memoize the href, not sure what's best for React performance-wise.

[MikkelBirkeholm]

Thank you for your extensive explanation! That was really insightful.