Google検索の期間指定に任意の期間を追加する拡張機能を作った

前のキーボードの記事が平成最後だったので、この記事が令和初の記事になりました。 日記とは言えないほどの更新頻度ですが、書きます。

きっかけ

半年前くらい、GoogleでReact関係について検索してて、「この前、発表された機能のお試し記事とかを見たいんだよなー」というときがありました。 そのとき、下の画像のように期間指定をするのですが、別のタイミングで検索するときに、 その都度、カレンダーなりで検索期間を指定することがありました。

そのとき、カスタムな期間指定を入れておけたらと思って、 Chrome ウェブストア で、それらしい英単語を入れて検索したのですが、思うような拡張機能が見つけられませんでした。

その体験から、半年経って、この前の休みに拡張機能を作りました。

chrome.google.com

「extra」ではなく「custom」？「period」ではなく「periods」？とか思ったりもしましたが、 どちらも確信がないので、この名前で行きました。 （ウェブストアで検索するときは、私のid「uitspitss」で検索した方がすぐ出てきます）

簡単な使い方

この拡張機能を入れると、他の拡張機能のように、ブラウザ上部にアイコンが出てきます。 このアイコンをクリックしたときに出てくるポップアップで、追加したい期間を追加すると、Google検索の期間指定のところに追加した期間が追加されます。

追加した期間はChromeの同期ストレージに保管されるので、ChromeにGoogleアカウントログインしていれば別のブラウザでも、追加した期間が読み込まれているかと思います。 あと、たまに、Google検索の期間指定のところに追加した期間が表示されていないときがあります。そのときは、ページの再読み込みをしてください。

最後に

今回は、Chrome拡張機能を作って公開する体験ができてよかったです。

最近、ReactはTypescriptで書いていて、今回の開発ではReactは使いませんでしたが、Typescriptで書きました。 VSCodeの型推論が効く程度でよかったので、コンパイル時のチェックはしない、お手軽babel設定で作ってました。

簡単な使い方のところで書いた、追加した期間が表示されていないことがある現象、Chrome拡張の範囲だけかもですが、 Typescriptで DOMContentLoaded のイベントが発火しなかったので、それを外してコードを書きました。 ポップアップ用のコードは発火していたのですが、コンテント用のコードは発火しなかったです。 前に、TypescriptではなくPure JSで書いたとき（ githubのcalendarでライフゲーム - Qiita ）は発火していたので、 TSコンパイルあたりが原因かなとは思います。

また、今回のコードはgithub上に置いておきます。 github.com