ハラミTech

技術系ブログです

Google検索した結果をハイライトするChrome拡張機能を作った!

Googleで検索したあとに、検索結果に出てきたページに遷移したとき
検索した文字列で再度そのページを検索することがたまにあります。

いちいちめんどくさいので、Chrome拡張機能で作ってみました!

chrome.google.com

機能

この拡張機能を入れると、以下のようなことができます。

Google検索した文字列を、遷移したページでハイライトしてくれる

これだけです! f:id:mori_morix:20180916172727p:plain

オプションとしては…

  • ハイライトの色を変更できる
  • ハイライトする文字列を完全一致検索に変える
  • ハイライト無効化

ちょっとわかりづらいですが

ハイライトする文字列を完全一致検索に変える

これは、例えば「time is money」とぐぐると、デフォルトでは「time」「is」「money」が別々にハイライトされてしまいます。
それが嫌な場合は、このオプションを有効にしてもらうと「time is money」という文章でハイライトしてくれます。

作り方

今回Chrome拡張機能をはじめて作りました。
以下の記事のテンプレートを参考に作成しました。

qiita.com

これを参考に作った拡張機能のソースは以下にありますので、参考にしたい人はどぞ!

github.com

Chrome拡張機能を公開する際に気づいたのですが、
ChromeのWebストアに登録する際には最初の1回だけは$5かかりました。
スパム防止用みたいですね、安くて助かりました(; ・`ω・´)

モチベーション

Chrome Webストアで「google highlight」とか検索すると、同じようなのが1件ありましたが
かぶってしまうとか気にせず作ってしまいました。(結果的にそんな被ってなさそうでよかったですがw)

こういうツールとかサービスはかぶりを気にして作ってしまうと、たいてい誰かが作ってしまってるのに気が付きます。
それがゲーム性とか特許に関連したものですと難しいですが、そうでない場合はかぶりは気にせずに勢いで作ってしまっていいと思います。
かぶりを気にしてしまうとなんにも作れません!!

大手でも二番煎じのサービスを投入して市場拡大を狙ったりしてますし全然かぶりはありです。
個人の場合は学習のためでもありますし、作って無駄になることはなにもないと思います。

最後に

Chrome拡張機能、はじめて作ってみましたが、html + css + JavaScriptで作れるってのをそもそも知りませんでした!
その素養さえあれば拡張機能を作るのは容易だとおもいます。

自分が作ったWebサービスを便利にするために拡張機能を作ってみる、という試みをしてみるのもよさそうだなと思いました。

あとバグの報告や機能追加の要望など気軽にDMなどください!!

では!