https://github.com/vaaski/userscript-template
https://github.com/vaaski/userscript-template
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/vaaski/userscript-template
- Owner: vaaski
- Created: 2024-06-11T13:46:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-11T15:35:38.000Z (almost 2 years ago)
- Last Synced: 2025-03-05T22:23:40.077Z (over 1 year ago)
- Language: TypeScript
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Userscript Template
> A template for creating userscripts with TypeScript.
## Installing
- Install Bun and Node
- Install [Violentmonkey](https://violentmonkey.github.io/get-it).
- Install the dependencies: `bun i`
- Run `bun run build` to transpile and bundle the script
- Drag the `dist/index.user.js` file into your browser and click install.
## About this template
- The metadata for the script is completely defined in [`package.json`](package.json).
- Relevant keys in [`esbuild.ts#L6`](esbuild.ts#L6).
- CSS injection is manual, they'll be imported as a string.
- There is a `styleInject` function in [`src/util.ts`](src/util.ts) that takes a CSS string and injects a `` 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.
- The `dev` script will watch for changes and rebuild the script.
- The bundle config is in [`esbuild.ts`](esbuild.ts).
- Build-time variables are declared in [`esbuild.ts#L19`](esbuild.ts#L19) at `esbuildConfig.define` and typed in [`types/window.d.ts`](types/window.d.ts).
- Linting is done with [Biome](https://biomejs.dev).
- Formatting is done with [Prettier](https://prettier.io).