Just use this git repo as a template.
- Allow Tampermonkey's access to local file URIs tampermonkey/faq
- install deps with
npm iornpm ci. npm run devto start your development.
Now you will see 2 files in ./dist/
dist/index.dev.user.js: You should install this userscript in your browser. It's a simple loader that loaddist/index.debug.user.json matched web page.dist/index.debug.user.js: This is the development build witheval-source-map. It will be automatically loaded bydist/index.dev.user.jsvia@require file://.../dist/index.debug.user.jsmetadata, Don't add it to your userscript manager.
- edit src/index.ts, you can even import css or less files. You can use scss if you like.
- go wo https://www.example.com/ and open console, you'll see it's working.
livereload is default enabled, use this Chrome extension
Everytime you change your metadata config,
you'll have to restart webpack server and install newly generated dist/index.dev.user.js UserScript in your browser again.
you can call GM.xmlHttpRequest,
if you prefer fetch API, you can use https://github.com/Trim21/gm-fetch
If you are using axios, you can use https://github.com/Trim21/axios-userscript-adapter
(these libraries are both included already)
use typescript as normal, see example
There are two ways to using a package on npm.
like original UserScript way, you will need to add them to your user script metadata's require section , and exclude them in config/webpack.config.base.cjs
just install a package and import it in your js file. webpack will pack them with in your final production js file.
npm run builddist/index.prod.user.js is the final script. you can manually copy it to greaskfork for deploy.
There is a limitation in greasyfork, your code must not be obfuscated or minified.
If you don't need to deploy your script to greaskfork, enable minify as you like.
github actions will deploy production userscript to gh-pages branch.
You can auto use greasyfork's auto update function.