Chromeの拡張機能を作ってみる Vol.1 仕様検討

Chrome Web Store

Chromeを使っていると

「もっとこういう機能があったらいいのに」

とか

「あのブラウザではこれができたのに」

といったケースに出くわすことがある人は多いんじゃないかと思います。

そういう時に、拡張機能を探してインストールすることで、欲しい機能を追加していくことが出来るようになっています。
他のブラウザでは「アドオン」と呼ばれてることもありますね。

けど、どうしても「なんかちょっと欲しいものとは違った」っていうパターンも往々にして発生します。
なので、本当に欲しいものが無いのなら、自分で作ってしまえばいいということで、この記事ではChromeの拡張機能の作り方を書いていってみようと思います。
まず自分で作るといった発想が無かった人や、敷居が高いんではないかといった人が拡張機能を作成するきっかけの一つになれば幸いです。

基本はJavaScript(NodeJS)の知識があればあとは応用でなんとかなるので。
(作る拡張機能の内容によってはHTML、CSSなども)

では、今回はVol.1ということで、まずは作成する拡張機能の簡易設計をしてみようと思います。

作成する拡張機能について

今丁度「複数のタブを簡単にまとめて閉じることが出来る拡張機能」が欲しいなと思っていたので、実践的にする為にこれを実際に作って公開までしてみようと思います。
ゆくゆくは様々な方法でタブを閉じることが出来るようにしたいんですが、記事としては一旦一番スモールな形をゴールとしてやっていこうと思います。

機能一覧

最小限の機能だけピックアップ。

  • 見ているWebページの右半分のどこかを指定回数クリックしたら右側のタブが全て閉じる(左半分なら左)
  • 閉じたことを通知する
  • 設定画面にてクリックする回数を変更出来るようにする

これだけ。

実装イメージ

付けたい機能がピックアップ出来たので、全体像と実装方針をイメージしていきます。

設定画面について

これはアドレスバー横の拡張機能のアイコンをクリックしたら新しいタブを開いて設定画面を表示し、そこで設定の変更フォームを設置していきます。
クリックしたアイコン下にポップアップを出してそこでやってもいいんですが、最終的に沢山の方法で閉じることが出来るようにしたいというのがあるので、設定フォームのボリュームが大きくなっていくと予想できます。
(この記事では最小限の実装でゴールとするのでボリュームは少ないですが)

設定内容の保存について

これはlocalStorageを使用します。

別PCのChromeを使うときにも同じ設定を使えるようにしたい場合は、このデータの同期方法を考える必要がありますが、今は特にその必要が無いので一つの端末内で完結させます。

指定回数のクリックにてタブを閉じる部分について

これは以下の順序で実現します。

  1. 各タブで表示されているページにクリックイベントにハンドラを登録しておく
  2. クリックイベントが来たらそのクリック回数を調べる
  3. 設定内容の数と一致したら右なのか左なのかを座標から判定
  4. chromeオブジェクトからタブの一覧を取得
  5. 現在のタブより右 or 左のタブに対してremoveメソッドを呼んでタブを削除

こんな感じでやっていきます。

chromeオブジェクトというのはChromeのJavaScript APIのことになります。
拡張機能でブラウザに対し何かをしたい(今回だとタブを削除したい)場合はこのAPIを使用して実現します。
くわしくはこちらにあるようなAPIです。

実装イメージまで出来たので、次回は雛形を作ってみようと思います。

関連リンク

Recent Posts

Archive