
2026/01/05 3:43
**Show HN:** *Hover – 任意のウェブページでIDEスタイルのホバードキュメントを表示*
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
改訂要約
この記事では、開発者が任意のブラウザで直接IDEに似た体験を得られるChrome拡張機能について紹介しています。ウェブページ上のコード(ドキュメントサイトでもAIチャットアプリでも)にカーソルを合わせると、拡張機能はOpenRouterまたはカスタムOpenAI互換エンドポイントからインラインでドキュメントを表示します。
インストール & 設定
フォルダをChromeの「未パック化ファイルを読み込む」開発者モードでロード。dist_chrome- 拡張機能アイコン → Settings から API アクセスを設定し、OpenRouterキーまたはカスタムエンドポイントURLを追加。
- 開発ビルドでは
ファイル(.env
)に API キーをバンドルすることも可。VITE_OPEN_ROUTER_API_KEY=… - URL パターン(例:
)で拡張機能を実行させるサイトを指定。*://*.github.com/*
開発フロー
以下の Bun コマンドを実行します。
bun install bun run dev # 開発サーバー起動 bun run build # 本番ビルドと lint 実行 bun run lint # コードの lint bun run format # コードフォーマット bun run package # Chrome Web Store 用 ZIP 作成
テストスクリプトは
scripts/README.md に記載。
状態 & 今後の計画
拡張機能はまだChrome Web Storeで公開されていません。準備が整い次第、ストアリストを追加予定です。既知の問題と今後の改善点は
TASKS.md で管理中。
オープンソース & プライバシー
MIT ライセンスに基づき配布され、プライバシー情報は
PRIVACY.md に記載。
ユーザーはページを離れることなくコード参照を即座に閲覧でき、開発者や企業はそのオープンソース性のおかげでツールの採用・拡張が可能です。
本文
Hover
ウェブページ上の任意のコードにカーソルを合わせると、ドキュメントが表示されます。
IDE のような感覚で、どこでも利用できます。
ドキュメントサイトや ChatGPT・Claude などの AI チャットアプリにも対応しています。
セットアップ
注: この拡張機能はまもなく Chrome ウェブストアに公開されます。リリース時にはリンクがここに表示される予定です。
-
拡張機能をビルド
bun install && bun run build -
Chrome へ読み込み
にアクセスchrome://extensions- Developer Mode を有効化
- Load Unpacked をクリックし、
フォルダを選択dist_chrome
-
API の設定
- 拡張アイコン → Settings を開く
- OpenRouter API キーを入力するか、カスタムの OpenAI 互換エンドポイントを指定
オプション OpenRouter Custom Endpoint -
対象サイトの設定
URL パターン(例:
)で拡張機能が動作するサイトを選択。*://*.github.com/*
開発
| コマンド | 用途 |
|---|---|
| 開発サーバー起動 |
| 本番ビルド&リント |
| リント実行 |
| コード整形 |
| ビルドして を作成(Chrome ウェブストア用) |
オプション: 開発ビルドに API キーを埋め込みたい場合は
ファイルを作成し、.env
と設定します。VITE_OPEN_ROUTER_API_KEY=your-key
テスト
評価ツールについては
scripts/README.md を参照してください。
現在の課題と今後の改善点
既知の問題や予定されている機能追加は
TASKS.md にまとめています。
プライバシー
データ取り扱いに関する詳細は
PRIVACY.md をご覧ください。
ライセンス
MIT LICENSE