KurosakiRei / webpack-userscript-template-with-vue3

template to build userscript with webpack + vue3

The userscript template with Webpack and Vue3

This is a template that makes you can build your userscript in a very fast and flexible way.

此版本中文文档

1. This is a personal "enhanced" version, if you don't want to use Vue3 to build your UI, you can find the original version here trim21/webpack-userscript-template.
2. Thank you very much Trim21 for making such a useful template.
3. This version only adds support for Vue3 on the original version, so please refer to the original readme for instructions

Features✨

• Vue3 support
• Sass support
• Degrade the @types/greasemonkey to V3 that supports more GM_* functions than its V4

Special Note📝

Livereload seems to be only available under the tampermonkey plugin. If you are using a "monkey" other than tampermonkey, such as violent monkey, please replace it with tampermonkey to develop your script

The following is the readme copy from the original repository:

---

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.

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 load dist/index.debug.js on matched web page.
• dist/index.debug.js: This is the development build with eval-source-map. It will be automatically loaded by dist/index.dev.user.js via @require file://.../dist/index.debug.js metadata, Don't add it to your userscript manager.

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

livereload is default enabled, use this Chrome extension

NOTICE

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.

used package

If you prefer some other bundler like rollup, you may use part of some of these packages.

userscript-metadata-generator

gm-fetch

userscript-metadata-webpack-plugin

Cross Site Request

you can call GM.xmlHttpRequest directly or use a fetch API based on GM.xmlHttpRequest https://github.com/Trim21/gm-fetch

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 packages with npm and import them in your code, webpack will take care them.

Build

npm run build

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

Minify

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.

automatically Deploy

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

example

deployed

You can auto use greasyfork's auto update function.

Q&A

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.

https://webpack.js.org/configuration/devtool/#development