ドキュメント
この拡張機能は Chrome 120 以降と Firefox 136 以降で動作します。
ユーザースクリプトの許可
ブラウザは、拡張機能の JavaScript をウェブページで実行するのに専用の権限を必要とします。この権限がなくてもルールのスタイルは適用されますが、ルールの JavaScript は実行されません。その場合、ポップアップと設定ページに有効にする方法が表示されます。
- Chrome 138 以降： 拡張機能の詳細を開き（
chrome://extensions→ User JavaScript and CSS → 「詳細」）、「ユーザー スクリプトを許可する」をオンにします。デベロッパー モードは必要ありません。 - Chrome 120〜137：
chrome://extensionsの右上にある「デベロッパー モード」をオンにします。これはユーザースクリプトを使うすべての拡張機能に対する Google の要件です。 - Firefox： ポップアップで「ユーザースクリプトを許可」をクリックし、ブラウザのダイアログで承認します。Firefox では拡張機能にサイトへのアクセスが許可されていないこともあります。その場合、ポップアップには「サイトへのアクセスを許可」が、設定ページには上部のバナーに「許可」が表示されます。
ルール
この拡張機能でいう「ルール」とは、URL パターンに一致するウェブページで実行される JavaScript と CSS のコード（どちらか一方でも可）のことです。
URL パターン
- パターンは
<scheme>://<host>/<path>の形式で書きます：https://site.com/* - 複数のパターンはカンマで区切ります：
https://one.com/*, https://two.com/* - 除外は
!で示します：!https://site.com/admin/*
拡張機能はすべてのパターンをブラウザのマッチパターン形式に変換します。ポップアップとバッジには、ブラウザが実際にルールを実行するサイトがそのまま表示されます。
スキームありのパターンは、ほぼ書いたとおりに使われます。
| 書き方 | ルールが実行される場所 |
|---|---|
https://site.com/* | site.com と www.site.com（ほかのサブドメインは対象外） |
https://*.site.com/* | site.com とそのすべてのサブドメイン |
https://site.com/path | site.com と www.site.com の、/path で始まるページ |
https://site.com | site.com と www.site.com の全体 |
http*://site.com | http と https の site.com と www.site.com |
http://localhost:*/* | 任意のポートの localhost |
スキームなしのパターンは、そのサイトとサブドメインを http と https の両方で対象にします。
| 書き方 | ルールが実行される場所 |
|---|---|
site.com, *site.com*, *.site.com | site.com とそのすべてのサブドメイン |
www.site.com | www.site.com と site.com |
пример.рф | пример.рф とそのサブドメイン |
site.com/path | site.com とそのサブドメインの、/path で始まるページ |
localhost:3000 | ポート 3000 の localhost |
/admin | すべてのサイトの、パスに /admin を含むページ |
* | すべてのサイト |
スキームありの除外は、書いたとおりそのまま使われます。https://site.com/*, !https://www.site.com/* は site.com では実行され、www.site.com では実行されません。スキームなしの除外は上の表に従います。!site.com/admin は site.com とそのサブドメインの /admin を除外します。
Firefox でのポート。 Firefox のパターンではポートを指定できないため、ポートは無視されます。localhost:3000 は任意のポートの localhost で実行され、ポート付きの除外はそのホストのすべてのポートを除外します。1 つのポートのすべてのサイトを対象にするパターン（*://*:8080/*）は、すべてのサイトを対象にするパターンになってしまうため、Firefox では赤で表示されます。
赤で表示されるのは、ブラウザが受け付けないパターンです。ホストの途中に * があるもの（https://shop*.site.com/*、https://site.*/*）や、拡張機能が実行できないスキーム（chrome-extension://、ws://）がこれにあたります。そのようなパターンはスキップされ、ルールのほかのパターンは引き続き機能します。除外が受け付けられなかった場合は、修正するまでルールはどこでも実行されません。そうしないと、除外したページでルールが実行されてしまうためです。
JavaScript のプロパティ
JavaScript パネルのヘッダーにあるボタン：
分離環境：スクリプトからページの DOM は見えますが、ページの変数や関数は見えません。すべてのフレーム：アドレスがルールに一致するフレームでもスクリプトを実行します。各フレームは個別にルールのパターンと照合されます。開始時に実行：スクリプトを DOM の構築前に実行します。オフの場合は DOM の構築後、画像やフレームなどのリソースが読み込まれる前に実行します。このスクリプトではDOMContentLoadedイベントが発生しない点に注意してください。
スタイルのプロパティ
スタイルパネルのヘッダーにあるボタン：
Sass プリプロセッサ：オン（デフォルト）の場合、スタイルはSassまたはSCSSとしてコンパイルされます。どちらの構文かは、コードに{;}があるかどうかで判断されます。オフの場合、スタイルは書いたとおりに適用されます。すべてのプロパティに自動で !important：コンパイル後のスタイルのすべてのプロパティに!importantを付けます。ネストされたフレームに適用：ページ内のフレームにもスタイルを適用します。デフォルトでオンです。shadow DOM に適用：オープンな shadow DOM を持つウェブコンポーネントの内部にもスタイルを適用します。デフォルトでオフです。
スタイルの変更は、ページを再読み込みしなくても開いているタブにすぐ反映されます。スタイルを編集したとき、ルールを有効にしたとき、ルールのアドレスを変更したときに反映されます。
共有ルール
「共有ルール」を使うと、ルール同士の依存関係を作り、読み込み順を明示的に指定できます。どのルールも、ルールのメニューで「共有ルール」にできます。共有ルールにすると、ほかのルールのモジュール一覧に追加されます。組み込まれたルールから使われるのは JS と CSS の内容だけで、ルールのほかのプロパティは無視されます。
以前のバージョン
拡張機能は、直近 10 回の保存それぞれの直前のルールのコードを保持します。ルールのメニューの「以前のバージョン」から確認できます。選んだバージョンはエディターに戻され、保存すると適用されます。バージョンはこのブラウザにのみ保存され、エクスポートにもクラウドにも含まれません。
そのほかの機能
- ルールが共有ルールで、ほかのルールに組み込まれている場合、そのルールの「ルールを有効にする」の状態は無視されます。
- 「クラウドに保存」は、そのルールをクラウドのバックアップに含めるかどうかを示すだけです。
- ルールのメニューの「新しいルールのテンプレートにする」：新しいルールが、このルールのコードとプロパティで作成されるようになります。
モジュール
ルールには外部の JS や CSS のモジュールを組み込めます。モジュールはルールより先に実行されます。https://... のリンクに対応しており、リソースの種類は拡張子から判別されます。
モジュールの内容はダウンロードされ、拡張機能のストレージに保存されます。更新は、モジュールの編集ウィンドウの「再ダウンロード」で行うか、「ライブラリの更新」の設定（手動、毎日、毎週）に従って自動で行われます。ダウンロードに失敗した場合は、以前のバージョンのモジュールがそのまま残ります。
ストレージ
ローカルストレージ
- 「JSON をダウンロード」は、ルール、ライブラリ、設定をファイルに保存します。
- 「JSON を読み込む」は、ファイル内のルールとライブラリの一覧を開きます。「選択項目を追加」は、チェックしたものを既存のものに追加します。すでにあるルールは置き換えられ、元のコードは以前のバージョンに残ります。「すべて置き換え」は、ルールとライブラリをファイルの内容ですべて置き換えます。
ブラウザの同期
ブラウザで同期がオンになっていれば、Google アカウントまたは Firefox アカウントのクラウドにバックアップをアップロードできます。この方法では、別途ログインや設定をする必要はありません。storage.sync は拡張機能の標準の同期方式です。バックアップのアップロードとダウンロードは手動で行います。
容量は 100 KB に制限されているため、アップロード前にコピーから外部モジュールの内容と自動生成されるデータがすべて取り除かれ、残りが圧縮されます。それでも容量が足りない場合は、バックアップに不要なルールの「クラウドに保存」をオフにしてください。
エージェント（MCP）
Claude Code、Codex、Gemini CLI、Cursor、VS Code、Claude Desktop などの AI エージェントは、ローカルの MCP サーバー user-js-css-mcp を通じてルールを読み取り、編集できます。この機能は試験運用版です。
- 設定ページの MCP セクションを開き、「MCP 接続を許可」をオンにします。
- クライアントを選びます。セクションに、そのまま使えるコマンド、ワンクリックのインストールリンク、または設定ブロックが表示されます。接続シークレットは入力済みです。
- クライアントを再起動します。サーバーはクライアントが自動で起動し、セクションにクライアントが接続済みであることが表示されます。
サーバーはお使いのコンピューター（127.0.0.1）で動作し、Node.js 18 以降または Bun 1.2 以降が必要です。拡張機能とサーバーはすべてのリクエストの前に接続シークレットを確認するため、コンピューター上のほかのプログラムがこれらを利用することはできません。シークレットの横にある「再生成」を使うと、古いシークレットで設定したすべてのクライアントが切断されます。
エージェントは、ルールとライブラリの一覧表示、読み取り、検索、作成、変更ができます。さらに、ページで実行されるルールの特定、ルールが動作しない理由の確認、ルールのファイルへのバックアップと復元、ルールを以前のバージョンに戻すこともできます。