fibonacid
fibonacid
Explore posts from servers
PD🧩 Plasmo DevelopersTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by fibonacid on 8/15/2023 in #questions
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?
1 replies