Documentation
The extension works in Chrome 120 and newer and in Firefox 136 and newer.
Allowing user scripts
Browsers run extension JavaScript on web pages only with a separate permission. Without it the rule styles still apply, but the rule JavaScript does not run; the popup and the options page then show how to turn it on.
- Chrome 138 and newer: open the extension details (
chrome://extensions→ User JavaScript and CSS → "Details") and turn on "Allow User Scripts". Developer mode is not needed. - Chrome 120–137: turn on "Developer mode" in the top right corner of
chrome://extensions. This is a Google requirement for every extension with user scripts. - Firefox: click "Grant User Scripts permission" in the popup and confirm it in the browser dialog. Firefox may also leave the extension without access to sites: then the popup shows "Allow access to sites", and the options page shows "Allow" in a banner at the top.
Rules
In the context of the extension, a rule is JavaScript and/or CSS code that is triggered on web pages that match its URL patterns.
URL patterns
- A pattern looks like
<scheme>://<host>/<path>:https://site.com/*; - Several patterns are separated by commas:
https://one.com/*, https://two.com/*; - An exclusion is marked with
!:!https://site.com/admin/*.
The extension turns every pattern into the browser's match pattern format, and the popup and the badge show exactly where the browser will run the rule.
A pattern with a scheme is used almost as written:
| You write | The rule runs on |
|---|---|
https://site.com/* | site.com and www.site.com, not other subdomains |
https://*.site.com/* | site.com and all its subdomains |
https://site.com/path | pages starting with /path on site.com and www.site.com |
https://site.com | the whole site.com and www.site.com |
http*://site.com | site.com and www.site.com over http and https |
http://localhost:*/* | localhost on any port |
A pattern without a scheme means the site with its subdomains, over http and https:
| You write | The rule runs on |
|---|---|
site.com, *site.com*, *.site.com | site.com and all its subdomains |
www.site.com | www.site.com and site.com |
пример.рф | пример.рф and its subdomains |
site.com/path | pages starting with /path on site.com and its subdomains |
localhost:3000 | localhost on port 3000 |
/admin | pages with /admin in the path on any site |
* | any site |
An exclusion with a scheme is used exactly as written: https://site.com/*, !https://www.site.com/* runs on site.com, but not on www.site.com. An exclusion without a scheme follows the table above: !site.com/admin excludes /admin on site.com and its subdomains.
Ports in Firefox. A Firefox pattern cannot name a port, so the port is dropped: localhost:3000 runs on localhost on any port, and an exclusion with a port excludes all ports of the host. A pattern for any site on one port (*://*:8080/*) would become a pattern for all sites, so in Firefox it is marked in red.
Marked in red is a pattern the browser does not accept: a * inside the host (https://shop*.site.com/*, https://site.*/*) or a scheme the extension cannot run on (chrome-extension://, ws://). Such a pattern is skipped and the rule's other patterns keep working. If an exclusion is rejected, the rule does not run anywhere until you fix it — otherwise it would run on the pages you excluded.
JavaScript properties
The buttons in the header of the JavaScript panel:
Isolated environment: the script sees the page DOM, but not its variables and functions.All frames: the script also runs in frames whose address matches the rule. Each frame is checked against the rule patterns separately.Run at the start: the script runs before the DOM is built, otherwise after it, but before resources such as images and frames are loaded. Note that theDOMContentLoadedevent is not triggered for such a script.
Style properties
The buttons in the header of the styles panel:
Sass preprocessor: on (default) — the style is compiled asSassorSCSS, the syntax is picked by the presence of{;}in the code; off — the style is applied as written.Auto !important for all properties: adds!importantto every property of the compiled style.Apply in nested frames: the style also goes into frames inside the page. On by default.Apply in shadow DOM: the style also applies inside web components with an open shadow DOM. Off by default.
A style changes in open tabs right away, without a page reload: when you edit it, enable the rule or change its address.
Shared rules
“Shared rules” allows you to build dependencies between different rules and explicitly control the order in which they are loaded. Any rule can be marked as “Shared rule” in the rule menu — this adds it to the list of modules of other rules. Only JS and CSS content is taken from the included rules, other properties of the rule are ignored.
Previous versions
The extension keeps the code of a rule before each of the last 10 saves: "Previous versions" in the rule menu. A version goes back to the editor and is applied after you save it. Versions are kept only in this browser: they are not exported and not saved to the cloud.
Other features
- The
enabledrule marker is ignored when the rule is shared and is included by another rule; - The
Save to cloudmarker only means that the rule is included in the cloud backup; - "Use as template for new rules" in the rule menu: new rules start with the code and properties of this rule.
Modules
External JS and CSS modules can be attached to rules, they run before the rules. https://... links are supported, the resource type is recognized by the extension.
The module content is downloaded and kept in the extension storage. It is updated by "Download again" in the module edit window, or on schedule: the "Library updates" setting — manually, daily or weekly. If a download fails, the previous version of the module stays.
Storage
Local storage
- "Download JSON" saves your rules, libraries and settings to a file.
- "Upload JSON" opens a list of the rules and libraries from the file. "Add selected" adds the checked ones to yours: rules you already have are replaced, and their old code stays in previous versions. "Replace all" replaces your rules and libraries with the ones from the file.
Browser sync
If sync is turned on in the browser, a backup can be uploaded to the cloud under your Google or Firefox account. This method needs no extra login or setup: storage.sync is the standard sync type for extensions. Backups are uploaded and downloaded manually.
It is limited to 100 KB, so before upload the content of external modules and all generated data are removed from the copy, and the result is compressed. If there is still not enough space, turn off "Save to cloud" on rules you do not need in the backup.
Agents (MCP)
AI agents — Claude Code, Codex, Gemini CLI, Cursor, VS Code, Claude Desktop and others — can read and edit your rules through the local MCP server user-js-css-mcp. The feature is experimental.
- Open the MCP section of the options page and turn on "Allow MCP connections".
- Pick your client. The section gives a ready command, a one-click install link or a config block, with the connection secret already filled in.
- Restart the client: it starts the server itself, and the section shows that the client is connected.
The server runs on your computer (127.0.0.1) and needs Node.js 18+ or Bun 1.2+. The extension and the server check the connection secret before any request, so another program on the computer cannot use them. "Replace" next to the secret disconnects all clients set up with the old one.
An agent can list, read, search, create and change rules and libraries, find which rules run on a page, read why a rule does not work, back rules up to a file and restore them, and return a rule to a previous version.