拡張機能でサイト一括表示
これはKCS AdventCalendar2021 21日目の記事です。
←20日目 | 22日目→
こんにちは、6tranovです。今回は作成したchrome拡張機能を紹介します。
画像↑のリンク先がREADMEです！
作った理由など
Googleなどの検索結果を一つ一つクリックするのが面倒だったので、ワンクリックで全て表示したいなと思ったからです。
最初はjavascriptで実装していましたがかゆいところに手が届かなかったのでtypescriptで書き直しました。最初拡張機能の作り方は全く知りませんでしたが、他の人のコードとか公式ドキュメントとかを読めば作れると思います。
前提事項
まず、拡張機能のコードを実行する場所は大きく分けて二つあります。backgroundと、表示しているサイト(content)です。一部のAPIはbackgroundからしか呼ぶことができないので、contentとbackgroundの間で処理を行き来させる必要があります。
処理の流れ
- 拡張機能のアイコンをクリックすると、backgroundのchrome.pageAction.onClicked.addListenerで登録していた関数が実行される。
- chrome.tabs.sendMessageでcontentに処理が移動する。
- contentでHTMLから開くべきURLを取得する。
- chrome.runtime.sendMessageでbackgroundに処理が移動する。
5. backgroundで新たに開くべきタブを開く。
工夫したところ
- 上で書いたものは新しくタブを開くときの流れですが、もともとのタブが1つか複数かで微妙に処理を変えてあります。さらに、開くべきURLがない場合の処理もあります。本当はこれらをポリモーフィズムで実装したかったのですが、できなかった理由があります。contentからbackgroundにオブジェクトを送ることはできるのですが、入っている関数が消失するからです。これは仕方がないので、Statusを送ることにしました。
- サイトはGoogle以外にも対応しているのですが、サイトによって微妙に挙動が異なることがありました。例えばZennとRedditは検索結果を表示すると、manifest.jsonに書いていたcontent_scriptsのmatches(検索結果のページのURL)からjsが発火しません。これを解決するために、contentのjsが発火するURLの範囲を少し広げて、検索結果の画面ではない場合はアイコンをクリックしたときに「検索結果がありません」と表示するようにしました。
- リファレンスは英語なので、これも勉強としてコミットメッセージ・README.md・CONTRIBUTING.mdとかはすべて英語にしました。
- 今まで真面目にgitを使ったことがなかったので練習としてgit-flowで管理しています。github-flowでもよかったのですが、複雑なほうが難しくて楽しいし勉強になると思ったので、こっちにしました。とにかく変更が生じたらこまめにコミットする、コミットメッセージはテンプレートを使用して変更理由を明記するなど、いろいろ勉強になりました。
改善したいこと
- chrome extensionのv3に対応したい。
- 表示したくないサイトのブラックリスト機能を付けたい。
- その他細かな修正
機能を考えて実装することはとても楽しいし、使ってくれた友人に便利だと言われたり機能改善を提案してくれたりしてとてもうれしかったので、これからも続けていきたいと思います。