search

StarkShang / vite-plugin-chrome-extension

A vite plugin to bundle chrome extensions for Manifest V3.
MIT License
460 stars 68 forks source link

[Feature] Support `dev` mode for official vite/svelte template #3

Closed heshdotcc closed 3 years ago

heshdotcc commented 3 years ago

Currently if, for example, one fuses the official vite template for svelte:

https://github.com/vitejs/vite/tree/main/packages/create-app/template-svelte-ts

When then applying this extension and running dev mode, it throws:

[plugin:chrome-extension] context method emitFile() is not supported in serve mode. This plugin is likely not vite-compatible. (x4)

Otherwise it compiles properly. Another thing to review should be merging the tsconfig.json from that same template.

Thank you a lot for such amazing project!

Cheers,

StarkShang commented 3 years ago

Hi @fchpr, thank for your feedback. I am not familiar with svelte, and more important I am focusing on tracking assets dependences(which discuss a lot in rollup/rollup#2872). If you have time, welcome to add these features. I'd like to think about these as soon as after finishing the tracking work (I already have some ideas to solve this problem, so it will not taken much time : - ) ).

StarkShang commented 3 years ago

@fchpr, I am looking into using this plugin with vite/svelte. I add an svelte example by using svelte in options page and popup page. It works well with command vite build. However, you mentioned that the error is thrown when running in dev mode. What does the dev mode mean? The default svelte template project contains dev script: vite, but I think a watch mode is more suitable for Chrome Extension development. I prefer using Storybook for component development, and using watch build mode for debugging in Chrome.

heshdotcc commented 3 years ago

Heyo! Sorry for not being able to answer... Your example seems pretty neat. The issue is that by default vite command seems to be made for hot-relaoding web/apps, not extensions per se. So what we should be looking for is a custom run script for watching source files and then re-run the dist build on any change to them.

Storybook is a great tool, indeed, but it may not apply to every case. I mean for small projects may be overkill...

Anyways, I will try to post any update here when I have time to look at the vite source code. Thanks for the update!

StarkShang commented 3 years ago

As mentioned in #6, whether the --watch option mentioned by @infix is what you need? In this mode, vite will rebuild the source code when it detect changes. As far as I know, Chrome extension can only be updated by reloading files which is differ from how vue or svelte development server works.

heshdotcc commented 3 years ago

Yes, it's. Let's follow the feature there. Thanks! Cheers,