ChromeWearGlasses

近視・遠視・乱視の見え方を、閲覧中のWebページ上で概略的に体験する Manifest V3 Chrome 拡張です。ツールバーの拡張アイコンを1回クリックすると、選択中の効果とフローティング操作パネルが現在タブに現れます。

Important

教育・体験用の近似表現です。実際の見え方、視力、度数を正確に再現・測定するものではなく、診断・治療・眼鏡やコンタクトレンズの処方には使用できません。

フロートは元ページの上へ重なり、ページ側のCSSから分離された状態で表示されます。折りたたみ、ドラッグ移動、Esc または閉じるボタンによる解除が可能です。

主な機能

• 拡張アイコンの1クリックで現在タブだけに適用／解除
• ページ右下に表示されるフローティング操作パネル
• フロート内で種類と強さを即時切替
• 控えめな浮遊・状態アニメーション（視差軽減設定に対応）
• ドラッグ移動とコンパクトなバブルへの折りたたみ
• 近視・遠視・乱視、それぞれ軽度／中等度／強度の9プリセット
• SPH（球面度数ラベル）、CYL（乱視度数ラベル）、AXIS（乱視軸）、画面効果強度の調整
• 選択内容を storage.sync に保存し、適用中ページへ設定変更を反映
• Esc キーによる即時解除
• 外部通信、広告、解析、ページ内容の収集なし

プリセット

見え方	軽度	中等度	強度
近視	SPH -1.00 D	SPH -3.00 D	SPH -6.00 D
遠視	SPH +1.00 D	SPH +2.00 D	SPH +4.00 D
乱視	CYL -0.75 D	CYL -1.50 D	CYL -3.00 D

ディオプター表記は比較のためのプリセットラベルです。ディスプレイの大きさ、画素密度、閲覧距離、明るさ、利用者の調節力などにより見え方が変わるため、度数から画面上のピクセルぼかし量を医学的に一意換算することはできません。平面のWebページでは、近視の「遠くがぼやける」、遠視の「近くがぼやける」という距離依存も厳密には再現できません。

インストール

1. このリポジトリをダウンロードまたはクローンする
2. Chrome で chrome://extensions を開く
3. 右上の「デベロッパー モード」を有効にする
4. 「パッケージ化されていない拡張機能を読み込む」を選ぶ
5. manifest.json がある ChromeWearGlasses フォルダを選ぶ
6. ツールバーへ ChromeWearGlasses をピン留めする

使い方

1. 通常のWebページを開く
2. ChromeWearGlasses の拡張アイコンをクリックして適用する
3. 右下のフロートで「近視・遠視・乱視」と「弱・中・強」を切り替える
4. フロート上部をドラッグして移動、− で折りたたむ
5. 再クリック、Esc、または × で解除する

プリセットの変更は、拡張アイコンを右クリックして選択します。より細かく調整する場合は「詳細設定を開く」を選択してください。ページを再読み込み／移動すると安全のため効果は解除されます。

権限

権限	用途
activeTab	ユーザーがクリックした現在タブだけを一時的な対象にする
scripting	視覚効果を現在タブへ注入・解除する
storage	選択プリセットと調整値を保存する
contextMenus	拡張アイコンの右クリックからプリセットと設定を開く

host_permissions と <all_urls> は要求しません。詳しくは PRIVACY.md を参照してください。

対応範囲と制限

• chrome:// ページ、Chrome ウェブストア、他の拡張ページなど、Chrome がスクリプト注入を禁止するページには適用できません。
• file:// ページでは、拡張の詳細から「ファイルのURLへのアクセスを許可する」が必要です。
• シークレットモードでは利用者による個別の許可が必要です。
• 内蔵PDFビューアー、クロスオリジンiframe、トップレイヤーのダイアログ、全画面動画などには効果が限定される場合があります。
• ページ全体のCSSフィルターを使うため、一部サイトでは固定要素、スクロール、動画の描画負荷が増えることがあります。
• 乱視は方向性のある薄い像のずれとして近似しており、実際の個人差や光学的な見え方を完全には再現しません。

開発と検証

ビルド工程や外部ランタイム依存はありません。Node.js 20以降で静的検査と単体テストを実行できます。

npm run verify

配布用ZIPを作る場合:

npm run package

手動検証用ページは tests/fixtures/vision-page.html です。テキスト、固定ヘッダー、フォームを含み、適用・プリセット切替・解除後に操作性と追加DOMの除去を確認できます。

構成

manifest.json          Chrome拡張マニフェスト
src/background.js      1クリック切替、バッジ、右クリックメニュー
src/content.js         CSSフィルター、フロート、ドラッグ、解除操作
src/simulation.js      プリセット、値の検証、画面効果計算
src/options.html       設定画面
src/options.css        設定画面のスタイル
src/options.js         設定保存とライブプレビュー
tests/                 単体テストと手動確認ページ

ロードマップ

• 任意サイトへの自動再適用（明示的なサイト権限を選択制で追加）
• 左右眼別の比較表示
• スクリーンショットを使った視覚回帰テスト
• Chrome ウェブストア向けの公開パッケージ整備

ライセンス

MIT License