search

aklinker1 / vite-plugin-web-extension

Vite plugin for developing Chrome/Web Extensions
https://vite-plugin-web-extension.aklinker1.io/
MIT License
537 stars 46 forks source link

Loading specific pages under localhost:3000 when running pnpm dev #148

Closed CodeBradley closed 7 months ago

CodeBradley commented 7 months ago

Say I'm working on an option page, popup, etc. I really want my file to load and popup in the browser with HMR so I can work on it, and when its ready I run another script to test it as an extension.

I am not 100% if this is possible already and I can up with my own approach anyways, but I feel like it's an absolute must for development if this repo doesn't already do it.

I basically created a playground subdirectory that loads an alternative vite config and alternative svelte entry point, but uses the same components my extension would.

Ideally though, I feel like a new script in package.json and a special setting in the vite config pointing to the page I want to load under local 3000 would be a much cleaner approach.

aklinker1 commented 7 months ago

I am not 100% if this is possible already and I can up with my own approach anyways, but I feel like it's an absolute must for development if this repo doesn't already do it.

The plugin already supports HMR with one major drawback: if you change a file also used in the background/content scripts, it causes a full reload. So having a separate environment for developing components could be useful if you're experiencing to many reloads. But try it out first.

A couple options for you:

  1. Add your playground HTML page to the additionalInputs option. This will "include" it in the build process. If it's located at playground/index.html, you can visit it at http://localhost:3000/playground/index.html in any browser.
  2. You don't need to setup a new package.json in your playground directory. Instead, just run vite dev ./playground and put a vite.config.ts file there. If you want to share plugins or config logic, you can create a <root>/vite.shared.config.ts and import anything shared into both your configs from there.
  3. Use a tool like storybook for developing components
  4. Try out WXT. I've written it to be this plugin's successor. It's an opinionated framework instead of just a build tool and it has a better dev mode: some improvements to HMR for UIs and it reloads the entire extension less often when saving files used by HTML pages and content scripts.
CodeBradley commented 7 months ago

Super cool, just tried it out. I love how the HMR works. I might have to move it over to WXT when I'm not on a time crunch. My only concern is it looks like TypeScript is forced, and it sounds like Svelte is moving away from TypeScript now? Are there plans to implement options to leave TypeScript out? Also, since .vscode is included anyways. Do you know how someone can attach to Chrome in the launch.json file since a localhost:3000 url isn't an option?

In my other repo, I'm launching the Chrome browser via launch.json with a preLaunchTask that starts, and waits, for my package.json script first. Since WXT opens the browser, it sounds like that won't be a good approach.

As for the former, I'm giving that a shot now to see how it works. Thanks for the suggestion

CodeBradley commented 7 months ago

So much cleaner, thanks for that!

aklinker1 commented 7 months ago

My only concern is it looks like TypeScript is forced, and it sounds like Svelte is moving away from TypeScript now?

WXT doesn't require you to use typescript, there just aren't any JS templates (I should probably add one). You can just rename the files to .js, and everything will work.

In my other repo, I'm launching the Chrome browser via launch.json with a preLaunchTask that starts, and waits, for my package.json script first. Since WXT opens the browser, it sounds like that won't be a good approach.

I haven't had time to experiment with the debugging setup you posted, but it should be possible for both vite-plugin-web-extension and wxt - they both use web-ext to open the browser.

CodeBradley commented 7 months ago

Oh nice, good to know. Someone also just told me they are only moving the compiler away from TypeScript (I haven't dug too much into it maybe it's nothing for UX.)

I found a few ways to improve that file I posted originally. It still has some issues with not matching up to the source maps, but once I perfect it I'll make sure to post it here for you. It involves the tasks.json and launch.json file now.

Back on this topic though, I setup the playground like you mentioned but I still have an issue with breakpoints not hitting because the components are outside of the directory with the components (src dir is a sibling). Maybe it's because I'm new to svelte, vite, etc., but I have not found a good way to resolve that other than to create a second components directory inside of my playground directory (which I'm trying not to do for a few reasons).

I'm seeing rollupOptions.input mentioned in a number of places, but it always points to a single file and not a directory of components so I feel like that might not be the answer. I assumed vite would just bundle everything together and map it to the exact directory the original file was in, but clearly it's not that simple.

Anyways totally off topic of this repo now. I appreciate the suggestion and it's working great (but god, coming up with a solid debugging setup has been an absolute pain for chrome extensions and vite/svelte so far.. lol)