Violentmonkey itself is built for modern browsers, to be precise, for Chrome >= 57 and Firefox >= 57. So if your browser has Violentmonkey, it is likely it also supports many ES6 features natively, for example, async / await, block-scoped variables, etc.
However, there are many more cool features that are not fully supported by browsers, or some features such as TypeScript and ES modules that won't be supported in userscripts natively.
In this tutorial we are going to create a project to compile ESNext and other modern syntax to browser compliant code.
- Node >= 18
- NPM >= 8.15.0
Create a new directory for your script:
$ mkdir my-script $ cd my-script
npx, we can generate the new project with a one-line command:
$ npx -p github:violentmonkey/generator-userscript -p yo yo @violentmonkey/userscript
Now we should get a project with the following structure:
├── dist ├── src │ ├── app.tsx │ ├── index.ts │ ├── meta.js │ ├── style.css │ └── style.module.css ├── babel.config.js ├── package.json ├── postcss.config.cjs ├── rollup.config.mjs ├── tsconfig.json ├── uno.config.ts └── README.md
Source code files are kept in
src, and will be compiled to
src/meta.js contains the metadata of our script, see Metadata Block for more details. Do not add actual code to this file.
src/index.ts is the entrance of our script, other files in
src can be imported.
$ npm run dev
Source code will be watched by the compiler and compiled to
dist once changed.
By installing the compiled userscript from
dist, we can test and keep up with the latest code of our userscript. See also How to edit scripts with your favorite editor.
$ npm run build
In this way the source code will be compiled exactly once, and saved in
The version and author of our userscript will be synced with that in
We have quite a few lovely features enabled by default:
Of course you don't have to use all these features. If you don't like them, you can simply ignore them or opt out by removing the plugins.
To learn more about each feature, check Features in Userscript Generator.