Thank you for making this!

[samklingdev]

I just wanted you to know that I absolutely love this plugin. Thank you!

[aklinker1]

Thank you! If you wanna try out something else, I'm working on a Nuxt-like framework for web extensions using the knowledge I've gained from developing this plugin:

https://wxt.dev

It's more opinionated than the plugin, but has a better output file structure, dev mode does a better job of reloading only what changed, it comes with utilities for zipping and publishing, and the CLI output is much nicer. I'd appreciate it if you tried it out and gave me some feedback!

[surtic86]

Also a thanks from me!
Im sure will try this out soon with my History Cleaner Plugin and then when it works well with my Auto Swiper :)

[samklingdev]

Oh that looks awesome, will check it out for sure!

…

On Sat, Aug 12, 2023, 16:22 Aaron ***@***.***> wrote: Thank you! If you wanna try out something else, I'm working on a Nuxt-like framework for web extensions using the knowledge I've gained from developing this plugin: https://wxt.dev It's more opinionated than the plugin, but has a better output file structure, dev mode does a better job of reloading only what changed, it comes with utilities for zipping and publishing, and the CLI output is much nicer. I'd appreciate it if you tried it out and gave me some feedback! — Reply to this email directly, view it on GitHub <#137 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKASAROHK5YG5YJJ7HD7TLXU6GR5ANCNFSM6AAAAAA3NYKZ3M> . You are receiving this because you authored the thread.Message ID: <aklinker1/vite-plugin-web-extension/repo-discussions/137/comments/6709044 @github.com>

[samklingdev]

I've been using WXT now for a week and its amazing!
I personally love opinionated, I don't want to spend months figuring out best practice's when those can be forced from the start.
Imagine living in a house built by an unopinionated carpenter.

I started with a react template (because I'm a masochist) and later went back to vanilla-JS. (because I'm a masochist)

I first thought it was strange that the vanilla template, instead of having all HTML code in the popup.html updated ('#app').innerHTML from popup.ts. The reason for that (as you know but others might not) is because updating a HTML file will not hot reload the extension, and you even have to restart the dev server for it to update, so that's annoying.

Writing html template literals is also annoying as you don't have formatting and highlighting without installing extensions to vs code etc.

So I realized that its actually easier to use a framework, any framework, over vanilla-JS just to not have to deal with that hassle.

[aklinker1]

I first thought it was strange that the vanilla template, instead of having all HTML code in the popup.html updated ('#app').innerHTML from popup.ts.

All of WXT's templates are slight variations on Vite's templates. Generate a project from each and compare them:

pnpm create vite --template vanilla-ts vite-template
pnpx wxt@latest init --template vanilla --pm pnpm wxt-example

There's lots of different ways to write vanilla JS, and these templates demonstrate one way to create a reusable "counter" component. You can definitely put all the markup in the HTML file if you don't want to create a JS file, or don't need to create reusable components.

The reason for that (as you know but others might not) is because updating a HTML file will not hot reload the extension, and you even have to restart the dev server for it to update, so that's annoying.

The plugin doesn't reload the extension when the HTML page changes, see #89, but WXT should...

WXT Demo

Screen.Recording.2023-08-20.at.1.51.26.PM.mov

Feel free to open an issue on the WXT repo if it doesn't reload the HTML page for you!

Writing html template literals is also annoying as you don't have formatting and highlighting without installing extensions to vs code etc.

An alternative to writing HTML templates as a string in JS files is to use Vite's ?raw import suffix to import a file as a string.

<!-- entrypoints/popup/template.html -->
<div>...</div>

// entrypoints/popup/main.ts
import template as "./template.html?raw"

console.log(template) // <div>...</div>

This would give you syntax highlighting and editor support inside the HTML file. Though personally, I find putting the markup/template in a separate file is annoying.

its actually easier to use a framework, any framework, over vanilla-JS just to not have to deal with that hassle.

Yeah, if you're using a separate template file like above, you're basically using your own DIY framework. If your UI is complicated, it makes sense to use a real framework. Personally, I prefer Vue, but it doesn't really matter which one you choose. Try a few out and decide which one is best for you or your project.