選択したテキストをサクッと検索できるChrome拡張を作った

作ったもの

▼ Chrome Web Store

https://chromewebstore.google.com/detail/selection-command/nlnhbibaommoelemmdfnkjkgoppkohje

解決したいこと

調べ物や資料作成の最中、単語の意味をサッと調べたいことが良くあります。もちろん右クリックやショートカットキーを使えばすぐGoogle検索できますが、頻繁に検索しているとそれすら面倒でした。

解決策

このChrome拡張をインストールすると、以下ができるようになります。

１．選択したテキストを検索エンジンや翻訳サイトなどで開ける

テキストを選択すると、ポップアップメニューが表示されるようになります。メニューに検索エンジンを設定しておくと、選択したテキストをメニューから検索できます。メニューには、URLにクエリパラメータを指定できるもサイトであれば自由に設定できます。

好きなサイトを登録できる。%sが選択したテキストとなる。

２．表示の仕方を選べる

ポップアップやタブで開くなど、４種類の表示方法から選べます。

1. Popup：ポップアップウィンドウ。フォーカス外すと勝手に消える

2. Tab：フォアグラウンドタブ。Ctrl+クリックでバックグラウンド

3. Sidepanel：サイドパネル。Chromeのみ。

4. API：任意のエンドポイントへのPOSTとかができる

デフォルトはポップアップです。自分でウィンドウを閉じるのも面倒なので、フォーカスが外れると勝手に消えるようにしています。これは完全に自分の好みです。

Sidepanelはなんか使って見たかったので実装してみました。ですが、開いた瞬間にウインドウが分割され、元々表示していたテキストが動いて視点から外れてしまいます。この挙動はUIとしてイマイチだなー、と思い自分では使っていません。

APIも作っては見ましたが、あまりユースケースのアイデアは浮かんでません。選択したテキストをNotionのDBに突っ込むくらい。

３．どのくらい楽になってるのか

• Before

  • アドレスバーから検索
    Ctrl + c → Ctrl + t → Ctrl + v → Enter ： 4操作

  • 右クリックから検索
    右クリック → 検索メニューをクリック ： 2操作

• After

  • Selection Commandから検索
    検索メニューをクリック ： 1操作

２～４倍楽になってる！
しかも、いろんなメニューを自由にカスタマイズできる！

今後

とりあえず自分で使う分には十分です。余裕があったら、メニューの追加を簡単に追加できるライブラリ機能みたいなものを作ってもいいかもしれません。

▼ Chrome Web Store

https://chromewebstore.google.com/detail/selection-command/nlnhbibaommoelemmdfnkjkgoppkohje