Skip to content

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 writeThe 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/pathpages starting with /path on site.com and www.site.com
https://site.comthe whole site.com and www.site.com
http*://site.comsite.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 writeThe rule runs on
site.com, *site.com*, *.site.comsite.com and all its subdomains
www.site.comwww.site.com and site.com
пример.рфпример.рф and its subdomains
site.com/pathpages starting with /path on site.com and its subdomains
localhost:3000localhost on port 3000
/adminpages 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 the DOMContentLoaded event 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 as Sass or SCSS, the syntax is picked by the presence of {;} in the code; off — the style is applied as written.
  • Auto !important for all properties: adds !important to 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 enabled rule marker is ignored when the rule is shared and is included by another rule;
  • The Save to cloud marker 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.

  1. Open the MCP section of the options page and turn on "Allow MCP connections".
  2. 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.
  3. 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.