Web Environment Marker

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://）で開いたページは対象外です