【Chrome extension】拡張機能を開発してみよう vol.1 - 拡張機能の種類と必要なファイル -

今回から、Chrome拡張機能を開発する手順を紹介します。

開いているページに対してアクションできるので、スクレイピングしたいときなどに重宝しています。

以前に紹介したGASでスクレイピングする方法だと、JavaScriptだと難易度が上がったり、ログインが必要なサイトだと対応できない場合がありましたが、拡張機能にしてしまえばどれもクリアできます。

拡張機能の何が良いか

良いところは色々あると思いますが、ChromeAPIを使ったプログラムが組めることだと個人的に思っています。これ通常のブラウザ(JavaScript)では出来ない機能が詰まっているのです。（開いている全てのタブ情報を取得して、それぞれのページに対してアクションする…など）

Chrome APIs - Google Chrome

そして、どうやらこのChromeAPIは拡張機能を通してしか使えないようです。
ChromeAPIで何ができるかをインプットして、拡張機能開発スキルを身につけておけば幅が広がりそうですね。

拡張機能の種類

実は拡張機能には3種類あります。
おそらく①②を開発するケースが多いと思います。

①Browser actions

きっとこれはお馴染みですね。
アドレスバーの右側にアイコンが表示され、どのページを開いていても使用できるのが特徴です。

②Page actions

先ほどのBrowser actionと同様にアドレスバーの右側にアイコンが表示されます。
しかし、特定のURLやページ内に特定の要素がある場合以外ではグレーアウトになり、使用できないのが特徴です。

補足：
Browser actionでも指定条件以外では動かないように制限をかけることは可能です。指定条件以外でグレーアウトにするか否かで使い分けるのが良さそうです。

③Override Pages

日本語にするとページの上書きです。
下記3ページのいずれかを、自分で用意したHTMLに書き換えられる機能です。（CSSやJavaScriptを含めることも可能）

・ブックマークマネージャー（chrome：// bookmark）
・履歴（chrome：// history）
・新しいタブ（chrome：//）

これに関してはあまり使用シーンが思い浮かず…。
調べてみてもあまりヒットしなかったので、事例も多くは無さそうです。

また自分で用意したHTMLファイルを表示したいのであれば、GASのWebアプリを利用するのが簡単かなーと個人的には思っています。（別途紹介します）

必要なファイル

大きく分けて3つあります。
・manifest.json（必須）
・HTMLファイル（必須）
・アイコン（任意）

それぞれの詳細を見ていきましょう。

manifest.json（必須）

どんな拡張機能なのかを記すファイルです。
Chromeはこのファイルを読み込んで、拡張機能をブラウザに実装するのでmanifest.jsonが無いと始まりません。

browser actionを開発する場合のmanifest.json例です。
必須項目はbrowser action以外でも必要な情報です。

{

 //必須
 "manifest_version":2, //manifestのバージョン（決められた値）
 "name":"extension", //拡張機能の名前
 "version":"1.0", //拡張機能のバージョン（自分で付与して管理）

 //任意項目
 "browser_action":{ //browser actionの拡張機能を作る際の設定事項
   "default_icon":{ //アイコン
     "16":"icon16.png" //48×48,128×128もあると良い（Chromeストアなどに使われる）
   },
   "default_popup":"popup.html" //アイコンクリックで表示するHTML
   }

 }

※実際のjsonファイルにコメント記載しているとエラーになりますが、今回は説明のため入れています（コピペ使用したい方はコメント削除してください）

HTMLファイル（必須）

拡張機能に実装するコードを記述するファイルです。
この中にスタイル指定やスクリプトも含むので、別でCSSファイルやJSファイルを用意してもOKです。（別で用意するのが一般的です）

先ほどのmanifest.json例の最後を見てみると下記記述がありますね。

"default_popup":"popup.html"

ここでアイコンクリックをして表示させるHTMLファイルを指定しています。

拡張機能の流れとしては下記になります。
・manifest.jsonを読み込み
・manifest.jsonで指定されているHTMLを表示
・HTMLの記述に沿ってJavaScript実行

拡張機能で何かをする（タブのURLを取得、スクレイピングなど…）というDoの部分は基本的にJavaScriptを使うことになります。

なので、大前提JavaScriptの知識が必要なのでご認識ください。（私は拡張機能のためにJavaScriptの勉強をしました）

アイコン（任意）

ファビコンやChromeストアで表示させるアイコンです。
16×16、48×48、128×128の3種類用意しておくのがベストです。

ただストア公開せず、自分だけの拡張機能にする場合は16×16のアイコンがあれば十分です。（ファビコンには綺麗に反映されます）