Boost Design Tool Testing with a Tampermonkey Plugin: Low‑Code, High‑Efficiency

1. Background

In KuJiaLe design tool testing, many high‑frequency and cumbersome tasks appear, such as:

Query plugin version: open Chrome console, run several commands, and filter version information.

Query model product: open dev tools, obtain the model product ID, encrypt it on the test platform, assemble a URL in the backend, and finally access the product detail page.

Modify custom advanced configuration: requires at least four page clicks before configuration can begin.

These repetitive operations affect work efficiency and are especially unfriendly to newcomers.

Analysis shows most of these actions are simple combinations of data query , command input , and page navigation , which are ideal for pluginization as one‑click operations.

2. Idea

Based on the background, we aim to develop a plugin to improve testing efficiency.

Requirements for the testing plugin:

Low development threshold, allowing many contributors to implement rich functions that meet various needs.

Powerful API to facilitate extension of capabilities.

Convenient plugin updates for easy promotion of new features.

Two obvious solutions—integrating a plugin inside the KuJiaLe tool or building a Chrome extension—both have high development cost, high maintenance overhead, and limited usage scenarios. Therefore we chose a third option: a Tampermonkey script.

What is a Tampermonkey script?

Tampermonkey is one of the most popular browser extensions, with over 10 million users. It works on Chrome, Microsoft Edge, Safari and other mainstream browsers. It allows users to customize and enhance their favorite webpages. User scripts are small JavaScript programs that can add new functionality or modify existing behavior on a page. With Tampermonkey, you can easily create, manage, and run these scripts on any website.

In short, a Tampermonkey plugin is a Chrome extension whose function is a script manager; it injects custom scripts into the current page, making your code part of the webpage.

Example: with only a few dozen lines of code you can mount a refresh button on any page. The essence is a piece of H5 code.

Therefore it matches our requirements perfectly:

Low development threshold: only H5 development is needed; knowledge of DOM and JavaScript suffices.

Powerful API: the script runs in the current page, so page elements and APIs are directly accessible, and Tampermonkey provides many internal APIs for cross‑origin requests and simple storage.

Easy updates: Tampermonkey itself is a script manager, making version and update management very convenient.

Because the Tampermonkey tool is a front‑end plugin, calling backend APIs has a natural advantage—no extra login is required, making it more flexible and efficient.

3. Plugin Design

3.1 Functional Composition

To keep the plugin simple and extensible, it is implemented as a floating draggable menu, divided into two modules: Tools and Common Links .

Tools integrate interactive operations such as data query, front‑end data modification, and command execution. Common Links provide quick navigation shortcuts that can assemble URLs based on model data or clipboard content.

3.2 Maintainability

To facilitate feature extension, the menu is configured dynamically. Adding new tools only requires specifying the function to trigger, without touching HTML or CSS.

Visibility conditions for each tool can also be configured to improve usability.

3.3 Extensibility

A Tampermonkey script is a single JavaScript file, which is simple to develop. However, as code grows, a single file becomes hard to maintain, especially when multiple product lines need different tools. Therefore we migrated the script to a TypeScript project, enabling easy expansion and management of multiple plugins.

4. Extending Plugin Capabilities

With about 100 lines of code we built the tool shell; the real value lies in the various menu functions.

Implementing features requires leveraging several APIs:

4.1 Browser API

Since the Tampermonkey script runs in the page context, all native browser APIs (window, document, alert, prompt, etc.) are directly usable, enabling easy URL manipulation, DOM data extraction, and front‑end interactions.

4.2 Third‑Party Libraries

Tampermonkey scripts can import third‑party libraries. To replace the default alert dialog, we integrated a lightweight UI library xtiper that provides various pop‑ups and toasts.

We also included

jsoneditor

as a static resource.

4.3 Cross‑Origin Requests

Tampermonkey supports cross‑origin requests. Our internal low‑code platform KUTA offers many high‑quality APIs, which we wrap in the tool to reduce context switching between testing platforms.

4.4 Tampermonkey API

The extension provides many internal APIs for clipboard operations, network requests, file downloads, and simple persistent storage, greatly enriching script capabilities.

4.5 Tool Front‑End API

The KuJiaLe design tool itself exposes numerous front‑end APIs that can be called from the console to fetch model data, scheme data, etc. We encapsulated many of these into convenient utilities.

5. Plugin Function Demonstration

Based on the above capabilities, we encapsulated several high‑frequency, cumbersome operations into quick tools. Typical scenarios include:

Data Query

Before: open KuJiaLe debug tool, select environment, navigate to user data query page, choose query item, enter user info.

Now: click the persistent tool in any page, select the user info query function, and enter content directly.

Model Interaction

Before: manually retrieve model ID, open backend, navigate, replace ID, refresh page.

Now: one‑click jump to model detail page.

Front‑End State Access & Modification

Before: open dev tools, type long commands to call APIs.

Now: one‑click modify model state.

URL Switching

Before: remember different environment URLs, concatenate them manually.

Now: one‑click switch.

6. Conclusion

Tampermonkey scripts are widely used as handy tools by the community, and integrating them into work yields impressive results. After nearly a year of iterative development, the testing plugin now includes over 40 small tools with just around 1,000 lines of code.

Because of its convenience, it is already widely adopted by product research, technical support, and implementation teams, with more than 100 daily users.

Future work will continue to encapsulate more convenient utilities and provide richer personalized configuration capabilities.