vite app + chrome extension

I'm trying to build a chrome extension that will work along side a traditional Vite app.
I'm new to the web extension space and it's a bit overwhelming. There are a lot of plugins and frameworks that claim to be the best approach but they all do the same thing in different ways. I'd like to find a solution that is VERY simple and solves HMR in a reasonably good way.

I'm currently considering the simplest approach i could think of, which consist of just adding additional entrypoints in my vite configuration to use the

dist

dist

folder to contain the app + the web extension files (

popup.html, background.js)

popup.html, background.js)

etc.

This is how the application is structured:

.
├── index.html
├── package.json
├── popup.html
├── public
│   ├── manifest.json
├── src
│   ├── app
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   └── extension
│       ├── background.ts
│       └── popup.tsx
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

.
├── index.html
├── package.json
├── popup.html
├── public
│   ├── manifest.json
├── src
│   ├── app
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   └── extension
│       ├── background.ts
│       └── popup.tsx
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

And these are the rollup options that define the entry points:

input: {
  main: "./index.html",
  popup: "./popup.html",
  background: "./src/extension/background.ts",
},
output: {
  entryFileNames: "[name].js",
}

input: {
  main: "./index.html",
  popup: "./popup.html",
  background: "./src/extension/background.ts",
},
output: {
  entryFileNames: "[name].js",
}

This works, but there is no HMR. To preview a change I need to run vite build.
Is there a simple tweak that i can do to improve this?

vite app + chrome extension

dist

dist

folder to contain the app + the web extension files (

popup.html, background.js)

popup.html, background.js)

etc.

This is how the application is structured:

.
├── index.html
├── package.json
├── popup.html
├── public
│   ├── manifest.json
├── src
│   ├── app
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   └── extension
│       ├── background.ts
│       └── popup.tsx
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

.
├── index.html
├── package.json
├── popup.html
├── public
│   ├── manifest.json
├── src
│   ├── app
│   │   ├── App.tsx
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   └── extension
│       ├── background.ts
│       └── popup.tsx
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

And these are the rollup options that define the entry points:

input: {
  main: "./index.html",
  popup: "./popup.html",
  background: "./src/extension/background.ts",
},
output: {
  entryFileNames: "[name].js",
}

input: {
  main: "./index.html",
  popup: "./popup.html",
  background: "./src/extension/background.ts",
},
output: {
  entryFileNames: "[name].js",
}

This works, but there is no HMR. To preview a change I need to run vite build.
Is there a simple tweak that i can do to improve this?

vite app + chrome extension

Similar Threads

vite app + chrome extension

Similar Threads

Similar Threads

Similar Threads