Web Environment Marker

登録したURLパターンに一致するページを、タイトルの文字列・画面のバッジ・枠線で見分けやすくします。

Web Environment Marker は、登録したURLパターンに一致するページを、ひと目で見分けられるようにするChrome拡張です。 ローカル開発環境・ステージング環境・本番の管理画面など、見た目がそっくりなサイトを複数のタブで開いていると、「いま操作しているのはどの環境か」を取り違えがちです。この拡張を使うと、環境ごとに色や文字列を割り当てて、タブのタイトル・画面の角のバッジ・ページの枠線で区別できます。 ■ 主な機能 ・URLパターンごとに、表示する文字列・色・バッジの位置と大きさを個別に設定 ・ワイルドカード（*）に対応：*.localhost、https://*.stg.example.com/* など ・タブのタイトル先頭に文字列を追加（例：「STG 」を付けると「STG 管理画面」のように表示） ・画面の四隅のいずれかにバッジを表示（赤・青・黄・緑・紫、大きさは3段階） ・ページのふちを枠線で囲む ・バッジと枠線はクリック操作を妨げません ・設定の変更は開いているタブへ即座に反映（リロード不要） ・SPAの画面遷移やタイトルの動的な書き換えにも追随 ・設定画面のURLテスターで、どの登録が適用されるかを事前に確認 ■ 使い方 1. ツールバーのアイコンをクリックすると設定画面が開きます 2. 「サイトを追加」でURLパターンと表示内容を登録します 3. 登録したパターンに一致するページを開くと、目印が表示されます ■ URLパターンの例 ・*.localhost　→ http://app.localhost:3000/ など .localhost で終わるホスト ・stg.example.com　→ そのホストのすべてのページ ・https://example.com/admin/*　→ 特定のパス配下だけ 複数の登録は上から順に照合し、最初に一致したものの設定を使います。 ■ プライバシー ・ページの内容を読み取ったり、外部へ送信したりすることはありません ・参照するのは、パターン照合のための現在のURLと、文字列を付けるためのページタイトルだけです ・設定はお使いのブラウザ内（chrome.storage）にのみ保存されます ・アカウント登録・外部通信は一切不要です ■ 「すべてのサイトのデータを読み取り、変更」の権限について どのURLを目印の対象にするかはユーザーが自由に登録するため、この拡張はすべてのサイトで動作できる必要があります。実際に行うのは、登録パターンに一致したページで、タイトルの先頭に文字列を追加することと、バッジ・枠線を表示する要素を重ねることだけです。一致しないページでは何も変更しません。 ■ 注意事項 ・chrome:// で始まる Chrome 内部ページや Chrome ウェブストアには表示できません ・ファイル（file://）で開いたページは対象外です