This is a project help you build userscript with webpack

Just use this git repo as a template.

中文说明

dev

1. Allow Tampermonkey's access to local file URIs tampermonkey/faq
2. install deps with npm i or npm ci.
3. npm run dev to start your development.
4. open webpack-userscript-template/dist/index.dev.user.js in your Chrome and install it with your userscript manager.

this userscript's meta contains // @require file://path/to/dist/index.debug.user.js, which take src/index.ts as entry point.

Everytime you change your metadata config, you'll have to restart webpack watch server and install new UserScript in your browser again, because Tampermonkey don't read it from dist everytime.

5. edit src/index.ts, you can even import css or less files. You can use scss if you like.
6. go wo https://www.example.com/ and open console, you'll see it's working.

livereload is default enabled, use this Chrome extension

You will also see a index.debug.user.js file in dist directory, this is a development usage file with eval-source-map for better browser error message.

TypeScript

use typescript as normal, see example

dependencies

There are two ways to using a package on npm.

UserScript way

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

Webpack way

just install a package and import it in your js file. webpack will pack them with in your final production js file.

build

npm run build

dist/index.prod.user.js is the final script. you can manually copy it to greaskfork for deploy.

minify

There is a limit in greasyfork, your code must not be obfuscated or minified.

auto deploy

github actions will deploy production userscript to gh-pages branch.

example

deployed

You can auto use greasyfork's auto update function.