chrome 拡張機能とは
chrome拡張機能とは，使用しているchromeブラウザを最大限に活用するための拡張機能(アプリケーション)です．
chromeを開いた時に右上に表示されるやつです．
選択した文字列をすぐに翻訳してくれる「google翻訳」や，Amazonで本を買う時に近くの図書館に同じ本があるかを自動で確認してくれる「その本，図書館にあります」など，使うと便利なものが多くあります．
その他たくさん(1000個以上)の拡張機能があるので，興味があれば「chrome拡張 おすすめ」で検索するといいかも．
しかも拡張機能は自分で作ることができます．
「こんな拡張機能があったら便利なのに」と思ったら，自分で作ってしまいましょう．
ただ，chrome拡張機能は単なるWebアプリケーションと違い，少し実装が面倒臭いところがあります(制約とか制約とか制約とか．．．)
というわけで，システム構成図を用いて簡単に解説しようというのが，本記事の趣旨です．
システム構成について
以下，chrome拡張機能のシステム構成を表した図になります
順番に解説していきますね．
拡張機能(main)
chrome拡張機能には，
- Browser actions(任意のWebページで動作する)
- Page actions(特定のWebページで動作する)
- Override pages(Webページの上書き(domやcssの変更等)をする)
という種類があります．
大抵の人は，「〇〇サイト(特定のwebページ)を見ている時にこういう機能があったらいいな」と思って拡張機能を実装することが多いので，Page actionsを選ぶことが多いです(独断と偏見)．
実装に必要なファイルとしては，
- manifest.json(全体の設定ファイル)
- popup.html(ポップアップの表示)
- popup.css(ポップアップのcss)
- popup.js(ポップアップのJavaScript)
となります．
特に，manifest.jsonはchrome拡張機能を開発する上で絶対に必要なファイルです．
必ず作成するようにしましょう．
またポップアップとは，「拡張機能のボタン(ページ右上)を押した時に表示されるページ」のことです．ポップアップ上では，必要に応じて”ボタン操作”や”テキスト入力”を行うことができます．
content_scripts
特徴は以下の通り
- WebページのDOM編集(読/書)
- WebページのCSS編集(読/書)
- ChromeAPIの機能が限定される
- 外部API,serverにアクセスできない
基本的には，chromeで開いている(閲覧中の)Webページに対して，DOM要素やCSSを変更する(例：背景色を変えたり，新しいボタンを追加等)際に，content_scriptsを利用します．
注意点として，content_scriptsではchromeAPIの一部機能しか使えません．
もし実装中にアクセス権限等でエラーが生じた場合，このchromeAPIの制限に引っかかっていることが多いです(経験談)．
その場合は，後述のBackgroundで実装することを考えなければならないので注意．
background
特徴は以下の通り
- ChromeAPIの機能がほぼ全て利用できる
- 外部API,serverにアクセスできる
- 永続，もしくはリクエスト受取時にbackground(裏)で稼働する
- WebページのDOM編集(読/書)はできない
- WebページのCSS編集(読/書)はできない
上記の通り，Backgroundではcontent_scriptsのようなアクセス制限等は設けられていません．
そのためBackgroundでは，外部APIや外部serverとの通信も可能です．
ただし，content_scriptsで可能だったDOM要素やCSSの変更はできません．
この部分は注意してください．
server
このserver(サーバ)は，Webアプリケーションにおける一般的なサーバ部分に相当します．
Backgroundから直接外部APIや外部データベースにアクセスすることも可能ですが，基本的には自分でserverを立ててからアクセスするのが好ましいです．理由としては，Backgroundでこれらを処理してしまうと，複雑化してしまうため．
個人的には，Backgroundはchrome拡張とサーバ間のプロキシとして運用するのがベストかなと．
ちなみに，サーバをJavascriptで実装するなら，expressかkoajsがおすすめです．
まとめ
chrome拡張機能の実装で必要な知識を解説しました．
具体的な実装に関しては，googleなりqiitaなりで検索すれば山ほど出てくるので，そちらを参考にしていただければなと．
もしこの記事が反響orコメントがあれば，もしかしたらコード解説+公開するかも．．．
↓参考サイト(ありがとうございます)
コメント