A template for creating userscripts with TypeScript.
- Install Bun and Node
- Install Violentmonkey.
- Install the dependencies:
bun i - Run
bun run buildto transpile and bundle the script - Drag the
dist/index.user.jsfile into your browser and click install.
- The metadata for the script is completely defined in
package.json.- Relevant keys in
esbuild.ts#L6.
- Relevant keys in
- CSS injection is manual, they'll be imported as a string.
- There is a
styleInjectfunction insrc/util.tsthat takes a CSS string and injects a<style>tag with the given name as the ID. - This is to avoid a duplicate styleInject function definition by esbuild and to provide more manual control.
- There is a
- The
devscript will watch for changes and rebuild the script. - The bundle config is in
esbuild.ts. - Build-time variables are declared in
esbuild.ts#L19atesbuildConfig.defineand typed intypes/window.d.ts. - Linting is done with Biome.
- Formatting is done with Prettier.