0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

検索エンジン間の再検索をショートカットキーでできるChrome拡張機能を作ってみた(ReactJS)

Posted at

インターネッツでリサーチをしていると検索エンジンの結果に不服なことは少なくないかと思います。
Google検索エンジンは大衆向け過ぎるしDuckDuckGoはニッチなワードだと思うような結果がでなかったり。他の検索エンジンも良いところ悪いところがそれぞれあって一長一短。

そこでショートカットキーだけで別の検索エンジンを使って同じキーワードで再検索できるChrome拡張機能、Rapid Re-Searchを作りました。

手前味噌ですが自分で使ってて今のところ役に立っています。

成果物

Chromeウェブストア[無料]:Rapid Re-Search
Rapid-Re-Search-1280-1.jpg
Dec-20-2022 15-18-05.gif

デモ動画のようにショートカットキーのみでも再検索ができます。

あるキーワードで満足しなかった場合は、
MAC: cmd + shift + 1
WIN: ctrl + shift + 1

でそこから
Re-Search Shortcut Key
MAC: cmd + 1 or 2 ...
WIN: ctrl + 1 or 2 ...

のショートカットキーで検索エンジンを選択して再検索します。

仕組み

アプリ立ち上げ時に検索ワードに入力したキーワードを取得するスクリプトをブラウザへ実行します。取得したキーワードは保存されます。
そしてアプリ立ち上げ後に入力したキーワードを使ってすぐに再検索できます。

取得したキーワードはchromeブラウザ側で提供しているchromeオブジェクトを使用して保存したりアップデートしています。ユーザーのローカル上で保管されています。

作り方

ReactとTypeScriptで作りました。デザインはニューモーフィズムっぽさを意識してます(アイコンは趣味)。
webpackを使ってChrome拡張機能に合わせたディレクトリで出力。

デバッグが面倒だった

審査へ出す前にChrome拡張機能一覧ページへ出力したファイルをアップロードすることでローカル上で拡張機能を使用できます。

コードを更新しながらローカル上でアプリを立ち上げつつ開発していくのですがデバッグがやりづらかったです。拡張機能には主に3つの概念があります。

Popup(見た目)
ContentScript(ブラウザへ実行するスクリプト)
Background(裏の処理)

の3つがあります。3つ目のBackgroundは今回使用しませんでした。

Popup(見た目)は別タブに表示しながらも開発できるのですがchromeメソッドなどを使用しながら開発する段階になるとタブ上でコードを実行できなくなりました。そのためいちいちアプリを立ち上げながら確認したのが面倒です。
Popupを開いた状態で右クリックするとブラウザと同様に"検証"によってコンソールを開けるのですがPopupが閉じると一緒にコンソールが閉じられて使いづらいです。

ContentScript(ブラウザへ実行するスクリプト)の更新もいちいちChrome拡張機能を削除して再度アップロードしなければコードが反映されませんでした。
そのため検索ぺージからキーワードを取得するスクリプトはブラウザ側のコンソール画面から実行して修正しています。

また、ローカル上へアップロードしたファイルはビルド後のファイルですので更新するたびにビルドしていました。
webpackを使用してファイルを保存する度にビルドするようにしていたのですがビルド毎に10秒ほどかかっていたのでストレスでした。
次拡張機能を作るならrViteやBunなど別の速そうなビルドツールを使ってみたいです。

妥協したこと

baiduなどの検索エンジンはページを開いた直後にスクリプトを実行することができませんでした。
Chrome拡張機能はContentScriptと言って正規マッチするURLが真になるとスクリプトを実行してくれるのですがbaiduなどはそれが通用しなかったためRapid Re-Searchのアプリを立ち上げ時にスクリプトを実行する形になりました。

作ってみた上での感想

検索エンジンに対する結論は一つの検索エンジンで人を満足させることは不可能だ。ということです。
天才エンジニアを囲ってるGoogleだって技術以外にも商売、ポリコレ、政治などそれらに対するスタンスを企業として持っていて無視できません。

Google検索エンジンのアンチカルチャーとして別の検索エンジンやブラウザそのものを開発する猛者も現れましたがそれも結局のところ製作者側の技術以外のスタンスにも左右されます。それにニッチなワードにはそもそも対応していなかったりもします。

だから検索エンジンの使い分けこそがジャスティス。

Chromeウェブストア[無料]:Rapid Re-Search

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?