Color Filter - Grayscale Mode 🎨

iPhone の Color Filter のように、ブラウザで表示されているコンテンツをグレースケール表示に切り替えることができるChrome拡張機能です。

機能

• ワンクリックでページ全体をグレースケール表示に切り替え
• オン/オフの状態を保存（新しいタブでも設定が維持されます）
• スムーズなトランジション効果
• シンプルで使いやすい UI

インストール方法

開発者モードでインストール

1. このリポジトリをクローンまたはダウンロード

   git clone https://github.com/nukopy/color-filter-web.git

2. Chromeで chrome://extensions/ を開く

3. 右上の「デベロッパーモード」をオンにする

4. 「パッケージ化されていない拡張機能を読み込む」をクリック

5. このプロジェクトのフォルダを選択

使い方

1. ブラウザのツールバーにある拡張機能のアイコンをクリック

2. ポップアップが表示されるので、トグルスイッチをクリック

3. ページ全体がグレースケール表示に切り替わります

4. もう一度トグルスイッチをクリックすると、通常の表示に戻ります

ファイル構成

color-filter-web/
├── manifest.json      # 拡張機能の設定ファイル
├── popup.html         # ポップアップのUI
├── popup.js           # ポップアップの動作制御
├── content.js         # ページへのフィルター適用
├── styles.css         # グレースケールのCSSスタイル
└── README.md          # このファイル

技術詳細

• Manifest Version: 3
• グレースケール実装: CSS filter: grayscale(100%)
• 状態管理: Chrome Storage API (sync)
• 対応ページ: すべてのWebページ（chrome:// などの一部のシステムページを除く）