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 folder to contain the app + the web extension files (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?
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server