4 ms·

WXT: Next-Gen Web Extension Framework

37 points by nateb2022 2y ago

Animats 2y ago
Oh, this is a framework, in the JavaScript sense, not a new scheme for web extensions. So it doesn't need Google's approval.
hysan 2y ago
For those who have worked a lot with web extensions, I’m curious to hear what their experiences are with frameworks. There are quite a few that I’ve come across: - WXT - Plasmo: www.plasmo.com - CRXJS: https://crxjs.dev/vite-plugin https://crxjs.dev/vite-plugin - Web Extension Vite Starter: https://github.com/antfu-collective/vitesse-webext https://github.com/antfu-collective/vitesse-webext - Bedframe: https://github.com/nyaggah/bedframe https://github.com/nyaggah/bedframe to name a few. Has anyone used multiple of these? If so, how do they compare? What makes one stand out above the others?
- jerrygoyal 2y ago
  we moved away from Plasmo to WXT and saw significant improvements: https://chatgptwriter.ai/blog/migrate-plasmo-to-wxt https://chatgptwriter.ai/blog/migrate-plasmo-to-wxt
  - knowsuchagency 2y ago
    Thanks for this write up
Andugal 2y ago
WXT is heavily inspired by Nuxt (with emphasis on DX) and we gladly use both at my company.
tmpfs 2y ago
I decided to try this recently on my first browser extension and so far the experience has been good. Sometimes the websocket connection for the hot reload dies but apart from that I've been quite impressed. Just abstracting away the different manifest files and using the webextension polyfill is all I need and it works. The only shame is how abysmal the experience is in Firefox I find myself preferring to debug the extension in Chrome as getting to the debugger in Firefox is such a pain. And I use Firefox as my primary browser so it's not because of a Chrome bias I say this. The Firefox folks could really improve the UX here.
- sureIy 2y ago
  > using the webextension polyfill What for? All browsers now have a promised API > The Firefox folks could really improve the UX here I wouldn't hold my breath.
jauntywundrkind 2y ago
Buult a small extension recently, and spent a while trying crxjs and some various rollup plugins and other options. It was taking a long long time, and I didn't have many dependencies I needed. So I just wrote the code by hand, unbundled. Using esm wasn't too too hard, but you have to use dynamic imports & a chrome specific getURL. https://stackoverflow.com/a/53033388 https://stackoverflow.com/a/53033388
cxr 2y ago
Running browser extensions through minifiers is pretty representative of the absurdity of the NodeJS/NPM cargo cult. No one who's writing an open source browser extension should be using minification, and no one who's installing a browser extension should be installing one that's closed source. Previously: > Most people aren't (or at least feel they aren't) able to take a hardline stance about only using free software, but if there's one area of your digital life you should be able to apply it to, it's browser extensions. <https://news.ycombinator.com/item?id=41998764 https://news.ycombinator.com/item?id=41998764>
- postalrat 2y ago
  How can you be sure that the code running in your browser is the same code that's in the repo for the extension? Does using a bundler count as minification? One that takes all the files in the packages and links them into fewer files.

37 points by nateb2022 2y ago

Oh, this is a framework, in the JavaScript sense, not a new scheme for web extensions. So it doesn't need Google's approval.

hysan 2y ago

For those who have worked a lot with web extensions, I’m curious to hear what their experiences are with frameworks. There are quite a few that I’ve come across: - WXT - Plasmo: www.plasmo.com - CRXJS: https://crxjs.dev/vite-plugin https://crxjs.dev/vite-plugin - Web Extension Vite Starter: https://github.com/antfu-collective/vitesse-webext https://github.com/antfu-collective/vitesse-webext - Bedframe: https://github.com/nyaggah/bedframe https://github.com/nyaggah/bedframe to name a few. Has anyone used multiple of these? If so, how do they compare? What makes one stand out above the others?

jerrygoyal 2y ago
we moved away from Plasmo to WXT and saw significant improvements: https://chatgptwriter.ai/blog/migrate-plasmo-to-wxt https://chatgptwriter.ai/blog/migrate-plasmo-to-wxt
- knowsuchagency 2y ago
  Thanks for this write up

Andugal 2y ago

WXT is heavily inspired by Nuxt (with emphasis on DX) and we gladly use both at my company.

tmpfs 2y ago

I decided to try this recently on my first browser extension and so far the experience has been good. Sometimes the websocket connection for the hot reload dies but apart from that I've been quite impressed. Just abstracting away the different manifest files and using the webextension polyfill is all I need and it works. The only shame is how abysmal the experience is in Firefox I find myself preferring to debug the extension in Chrome as getting to the debugger in Firefox is such a pain. And I use Firefox as my primary browser so it's not because of a Chrome bias I say this. The Firefox folks could really improve the UX here.

sureIy 2y ago
> using the webextension polyfill What for? All browsers now have a promised API > The Firefox folks could really improve the UX here I wouldn't hold my breath.

jauntywundrkind 2y ago

Buult a small extension recently, and spent a while trying crxjs and some various rollup plugins and other options. It was taking a long long time, and I didn't have many dependencies I needed. So I just wrote the code by hand, unbundled. Using esm wasn't too too hard, but you have to use dynamic imports & a chrome specific getURL. https://stackoverflow.com/a/53033388 https://stackoverflow.com/a/53033388

cxr 2y ago

Running browser extensions through minifiers is pretty representative of the absurdity of the NodeJS/NPM cargo cult. No one who's writing an open source browser extension should be using minification, and no one who's installing a browser extension should be installing one that's closed source. Previously: > Most people aren't (or at least feel they aren't) able to take a hardline stance about only using free software, but if there's one area of your digital life you should be able to apply it to, it's browser extensions. <https://news.ycombinator.com/item?id=41998764 https://news.ycombinator.com/item?id=41998764>

postalrat 2y ago
How can you be sure that the code running in your browser is the same code that's in the repo for the extension? Does using a bundler count as minification? One that takes all the files in the packages and links them into fewer files.