Tutorial: Building a Watermark Plugin

This tutorial demonstrates how to use a single sentence to have AI develop a complete NocoBase watermark plugin -- from creating the scaffold to enabling and verifying, all done by AI.

Final Result

After enabling the plugin:

• A semi-transparent watermark overlays NocoBase pages, displaying the current logged-in username
• The watermark cannot be removed by deleting the DOM -- periodic detection will automatically regenerate it
• Watermark text, opacity, and font size can be adjusted in the "Plugin Settings"

Prerequisites

:::tip Recommended Reading

• NocoBase CLI -- Installing and starting NocoBase
• AI Plugin Development Quick Start -- Installing Skills

:::

Make sure you have:

1. A running NocoBase development environment (NocoBase Skills are automatically installed during NocoBase CLI initialization)
2. An editor that supports AI Agent open (e.g., Claude Code, Codex, Cursor, etc.)

:::warning Note

• NocoBase is migrating from client (v1) to client-v2, and client-v2 is still under development. The client code generated by AI development is based on client-v2 and can only be used under the /v/ path. It is available for early access and experimentation, but is not recommended for production use.
• AI-generated code may not be 100% correct. We recommend reviewing it before enabling. If you encounter issues at runtime, send the error message to AI and let it investigate and fix -- it usually takes just a few rounds of conversation to resolve.

:::

Getting Started

In your NocoBase project root directory, send the following prompt to AI:

Help me use nocobase-plugin-development skill to develop a NocoBase watermark plugin.
Requirements: overlay a semi-transparent watermark on the page showing the currently logged-in username to prevent data leaks via screenshots.
Periodically check if the watermark DOM has been removed and regenerate it if so.
Support configuring watermark text, opacity, and font size in the plugin settings page.
The plugin name is @my-project/plugin-watermark

What AI Did

After receiving the requirements, AI will automatically execute the following steps:

1. Analyze Requirements and Confirm the Plan

AI will first analyze which NocoBase extension points this plugin needs, then present a development plan. For example:

Server-side:

• A watermarkSettings collection to store watermark configuration (text, opacity, font size)
• A custom API to read and write watermark settings
• ACL configuration: logged-in users can read, admins can write

Client-side:

• A plugin settings page with a form to configure watermark parameters
• Watermark rendering logic that reads the configuration and overlays the watermark on the page
• Tamper detection with a timer to monitor the watermark DOM

After you confirm the plan, AI starts writing code.

2. Create the Plugin Scaffold

yarn pm create @my-project/plugin-watermark

AI generates a standard plugin directory structure under packages/plugins/@my-project/plugin-watermark/.

3. Write Server-Side Code

AI will generate the following files:

• Collection definition -- A watermarkSettings table with text, opacity, and fontSize fields
• Custom API -- Endpoints to read and update watermark settings
• ACL configuration -- Logged-in users can read watermark settings, admins can modify them

4. Write Client-Side Code

• Plugin settings page -- An Ant Design form for configuring watermark text, opacity (slider), and font size
• Watermark rendering -- Creates a fullscreen canvas/div overlay on the page, displaying the current logged-in username
• Tamper detection -- Dual protection with MutationObserver + timer; the watermark is immediately regenerated if the DOM is removed

5. Internationalization

AI automatically generates Chinese and English language packs -- no extra action needed from you:

• src/locale/zh-CN.json -- Chinese translations
• src/locale/en-US.json -- English translations

6. Enable the Plugin

yarn pm enable @my-project/plugin-watermark

After enabling, open the NocoBase page and you'll see the watermark overlaying the content.

How Long Did It Take

From entering the prompt to having a working plugin, it takes approximately 3-5 minutes. AI completed the following work:

Want to Build More Plugins?

The watermark plugin primarily involves frontend rendering and simple backend storage. If you want to learn what else AI can help you with -- such as custom blocks, complex collection relationships, workflow extensions, and more -- check out Supported Capabilities.

Related Links

• AI Plugin Development Quick Start -- Quick start and capability overview
• Supported Capabilities -- Everything AI can help you do, with sample prompts
• Plugin Development -- The complete guide to NocoBase plugin development
• NocoBase CLI -- Command-line tool for installing and managing NocoBase