TamperBuilder

• Use any Javascript/Typescript framework to create Tampermonkey script example.
• No longer need to use native JavaScript or jQuery.
• Use TypeScript with any framework you like.

Core concepts

• In most cases, we use a TamperMonkey script to modify a web page to achieve 2 functions:

1. Modify or listen to the content of the web page is already there;
2. Add part of the content to extend more functionality.

• If you only need implement the first function, you only need native JavaScript code to realize the function you want. Of course, if you want to refer to the current project's code, its main code is in the directory src/common/utils.

• But if you want to add some new functionality th the page that requires adding a lot of DOM(e.g. a little button in the corner that when you click on it opens up a new interface at the top level), it's a better choice to use a JavaScript framework to create the content.

• The above is reason why I created this code repository.

Native JS Content

• All runtime functions are written in TypeScript.
• Extended some DOM manipulation methods.
• Wraps some Tampermonkey-specific APIs.
• Some common utility functions (refer to lodash).

Supported framework

• Vue ( Include Pinia )
• React ( Include Zustand )

  The original version was redux, but I've currently migrated to zustand, check out the details of why.

• Preact ( Include @preact/signals)
• Lit ( Include @lit/context )
• Svelte
• Solid

Building Tool

• Vite
• Webpack

  Deprecated, for more information please see Legacy Build Support.

Prerequisite

• Node.js (>= 22.0.0)

  Only tested under Node 22.*.0, older versions may not be compatible.

Usage

git clone https://github.com/vivelarepublique/TamperBuilder
cd TamperBuilder
npm install

for development:

npm run dev

for build:

npm run build

Customization Guide

After you have read and completed the steps above, if you want to build your own desired code content, modify the code in the following order.

1. Modify the code in the package.json file content, include name, description, version, author, etc.
2. Uninstall or install the dependencies you need in the package.json file.
3. Delete the framework code directory in the src directory that you don't need to use. (For example, if you only use vue, then delete the react, preact, lit, svelte, and solid directories).
4. This time delete the code in src/index.ts that you don't need to use.
5. Remove parameters for frameworks not used under config/global-configuration.yaml.
6. Customize the content of the config/banner.yaml to determine the banner of the final packaged file.
7. Customize the parameters in vite.config.ts as needed while remove unnecessary imports.
8. Done!

Ongoing plans

• [ - ] Framework support
  • Angular

    Compiling Angular projects can only be done with Angular's own compiler, not with Vite or Webpack, so combining Angular code with code from other projects can be a pain.

  • Astro

    Astro is using a self-contained build tool based on Vite, so combining Astro with code from other projects isn't simple.

• [ X ] Repackaged JavaScript Functions
• [ X ] Detailed documentation
• [ X ] Performance testing and comparison

License

MIT

Author

vivelarepublique

Your support

Give a ⭐️ if you like this project!