Google Antigravityを使ってChrome拡張「Chrome Multi-Highlighter」を作りました
Google Antigravityを使ってChrome拡張「Chrome Multi-Highlighter」を作りました
某IT推進企業でAWSインフラエンジニアとして働いているkobakichiです。
普段はTerraform、Ansibleを使ってインフラ構築、保守を担当しています。
前回の「Range Shot Annotator」に引き続き、Google Antigravityを使ってChrome拡張を作りました。
今回の拡張機能も、開発から公開手順まで完全にAntigravityにお任せで作成しました。
Google Antigravityのリンクはこちらです。
前提
すでに拡張機能としては同じ機能のものが複数あると思いますが、車輪の再発明大歓迎で作りました。
結果、自分で作ったもののほうが愛着湧く。うん。
拡張機能概要
Webページを調べものしていると「複数のキーワードを同時に探したい」と思うことってありませんか？
- 長い契約書PDFで「解約」「違約金」「更新」を一度に確認したい
- 技術ドキュメントで「エラー」「警告」「deprecated」を探したい
- 会議議事録で「TODO」「決定事項」「次回」をまとめてチェックしたい
ブラウザの標準検索（Cmd+F）では1つずつしか検索できず、複数キーワードを切り替えながら探すのは地味に面倒です。
そこで、複数のキーワードを同時にハイライト表示し、色分けしてくれる Chrome拡張機能を作りました。
Chrome Multi-Highlighter
完全無料でお使いいただけます。
何ができるのか？
この拡張機能では「複数のキーワードを同時にハイライト表示し、色分けして視覚的に探しやすくする」ことが可能です。
シンプルに、複数キーワード検索→色分けハイライト→ナビゲーションという流れを実現することを目指しました。
1. 起動はアイコンクリック一発
Chromeツールバーの拡張機能アイコンをクリックすると、画面右上にフローティングパネルが表示されます。
パネルはドラッグで自由に移動できるので、邪魔にならない場所に配置できます。
2. 複数キーワードを同時ハイライト
検索窓にスペースやカンマで区切ってキーワードを入力し、Searchボタンをクリック（またはCmd+Enter）するだけ。
最大6色のハイライト色が自動で割り当てられ、どのキーワードがどこにあるか一目瞭然です。
3. ナビゲーション機能
矢印ボタン（← →）でハイライト箇所を順番にジャンプできます。
長いページでも目的の箇所にサクッと移動可能です。
4. キーワード保存
入力したキーワードは自動保存されるので、次回同じページを開いた時もすぐに検索を再開できます。
操作方法
操作方法は以下の通りです。
| 操作 | アクション |
|---|---|
| パネル表示 | 拡張機能アイコンをクリック |
| キーワード入力 | スペースまたはカンマで区切って入力 |
| ハイライト実行 |
Search ボタン または Cmd + Enter
|
| 次のマッチへ |
→ ボタン |
| 前のマッチへ |
← ボタン |
| ハイライト解除 | Clear ボタン |
| パネル移動 | ヘッダー部分をドラッグ |
| パネルを閉じる |
Esc キー または × ボタン |
この拡張機能はどんな課題を解決するのか
-
複数キーワードの同時検索: 標準の
Cmd+Fでは1キーワードずつしか検索できませんが、この拡張機能なら複数キーワードを一度に検索できます。 - 視覚的な色分け: キーワードごとに異なる色でハイライトされるため、どのキーワードがどこにあるか直感的に把握できます。
- 長文ドキュメントの効率的な確認: ナビゲーション機能で、長いページでも目的のキーワードにサクッとジャンプできます。
使用技術
このツールは、軽量・高速であることを重視して作られています。
- Chrome Extension (Manifest V3): 最新の仕様に準拠し、セキュリティとパフォーマンスを確保しています。
- React + TypeScript: 型安全性とコンポーネント設計により、保守性の高いコードを実現しています。
- Vite: 高速なビルドツールを採用し、開発効率を向上させています。
- mark.js: テキストハイライトのライブラリを使用し、高精度なマッチングを実現しています。
- Shadow DOM: ページのスタイルと干渉しないよう、Shadow DOM内にUIを描画しています。
まとめ
「調べもの中に複数のキーワードを同時に探したい」。
そんなシンプルなニーズに応える拡張機能です。
もし長いドキュメントを読む機会が多い方は、ぜひ一度試してみてください。
Discussion