What libraries facilitate writing custom browser userscripts?

Several specialized libraries and build tools exist to make developing custom userscripts vastly easier, ranging from build-system integrations like vite-plugin-monkey to helper utilities like GM_config and UI component libraries. These tools streamline userscript creation by providing modern JavaScript bundling, automated metadata generation, simplified storage management, and simplified cross-domain request handling.

Modern Build Tools and Framework Integrations

Building userscripts with modern tools like ES Modules, TypeScript, or React used to be difficult because userscripts require a specific // ==UserScript== header block and isolated execution environments. Dedicated build tools solve these workflow bottlenecks:

• vite-plugin-monkey: A popular plugin for Vite that lets developers build userscripts using modern frontend stacks (React, Vue, Svelte, or TypeScript). It automatically injects the metadata header block, handles hot module replacement (HMR) during development, and bundles assets into a single .user.js file.
• rollup-plugin-userscript: Similar to the Vite plugin, this Rollup integration compiles TypeScript or ES6 code into standard userscript format, taking care of grant declarations and dependency bundling automatically.

Storage and Configuration Libraries

Managing user settings inside a userscript often requires custom UI dialogs or interacting with manager-specific APIs (GM_setValue / GM_getValue). Specialized libraries simplify this process:

• GM_config: A dedicated library designed to automatically generate graphical settings/preferences menus within userscripts. It abstracts the storage logic using the GM_* storage APIs while rendering a clean UI for settings.
• GM_fetch: A lightweight wrapper around the native fetch API that seamlessly routes web requests through GM_xmlhttpRequest or GM.xmlHttpRequest. This allows developers to use standard syntax to make cross-origin network requests, bypassing traditional CORS restrictions.

UI and DOM Manipulation Helpers

Userscripts frequently depend on DOM selection, mutation monitoring, and UI injection. Developers regularly pair userscripts with standard utility libraries to avoid common pitfalls like asynchronous content loading:

• ElementReady / waitForKeyElements: Utility functions (such as @sindresorhus/element-ready or custom jQuery/vanilla wrappers) designed to wait for dynamic single-page application (SPA) elements to appear in the DOM before running script logic.
• SweetAlert2 / Toastify: Commonly imported via @require in metadata blocks to provide modern modal popups, alerts, and notification toasts directly on top of host web pages.