This is a project help you build userscript with webpack
Just use this git repo as a template.
- Install one of the Violentmonkey or Tampermonkey extensions (available for all browsers).
- Go to the Releases section, where you'll find a
.jsfile. - Click the file to install it, and you're all set!
- Simply select any text with your mouse, and it will be automatically translated.
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 packages with npm and import them in your code, webpack will take care them.
npm run builddist/index.prod.user.js is the final script. you can manually copy it to greasyfork 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 greasyfork, enable minify as you like.
github actions will deploy production userscript to gh-pages branch.
You can auto use greasyfork's auto update function.
you may find enabling source map not working well in production code, because Tampermonkey will add extra lines (all your @require) before your script. I don't know if there is a good fix for this, You need to use webpack config devtool with eval prefix to make it work as expected, so source map is disabled in this production build.