An opinionated template repo using Webpack and TypeScript to build your userscript for Tampermonkey and more extensions.
Based on pboymt/userscript-typescript-template.
Just write your styles in src/assets/styles/styles.scss and they will append in web page's <head></head>!
You can also add your own files with .css or .scss extension in StylesInjecter class.
The repository generates two different assets (files):
- One is fully compiled (
index.user.js); - The second (
index.hot-reload.user.js) has userscript's meta info and reference to the first asset so you can copy and paste its entire code to Tampermonkey once.
This allows you faster updating scripts by automatically picking up recent changes.
The project has different classes to:
- Render, remove elements;
- Guards (which are TS decorators) that allow you to restrict method/function execution;
- HTML element finders;
- Build your own HTML elements declaratively.
# Use Github CLI
$ gh repo clone kenya-west/userscript-typescript-template-kw
# Or use 'git clone' command directly
$ git clone https://github.com/Kenya-West/userscript-typescript-template-kw.git- Install dependencies with
npm ci. - Edit settings in
userscriptobject inpackage.json, you can refer to the comments inplugins/userscript.plugin.ts. - Code your userscript in
srcdirectory (likesrc/index.ts). - Generate userscript with
npm run buildornpm run build:watchto auto-update resulting bundle on changes. - Copy generated userscript contents
index.hot-reload.user.tsto Tampermonkey -> Add new script.
You need install other loader plugins to support other file types.
Allow Tampermonkey's access to local file URIs (Tampermonkey FAQs) and import built userscript's file URL.
You can publish your userscript to Greasy Fork or other websites.
You can push your userscript to Github and import it to Greasy Fork.
Now solved. Classes use tsyringe library to get instatiated.
If you create elements, you need to remember which strings to use. You can confuse them. Make a way to pre-define and reuse strings of ids of custom HTML elements.
Currently, to create a custom HTML element, you need to create an abstract class, then a base class, and then finally, final class of your element. Why do we need 3 steps to make it?
Some HTML element just need a base control methods and that's it. Make a general custom HTML element class.
Strangers may be lost with so many classes. What the proper way to create custom HTML element? How to add custom styles? How to add support for custom file types? Add an action? What is this for? This is where the fun begins we need clear misunderstanding.