【図解】chrome拡張機能の開発に必要な知識と概要についてまとめてみた

IT
この記事は約4分で読めます。
スポンサーリンク

chrome 拡張機能とは

chrome拡張機能とは,使用しているchromeブラウザを最大限に活用するための拡張機能(アプリケーション)です.

chromeを開いた時に右上に表示されるやつです.


選択した文字列をすぐに翻訳してくれる「google翻訳」や,Amazonで本を買う時に近くの図書館に同じ本があるかを自動で確認してくれる「その本,図書館にあります」など,使うと便利なものが多くあります.

その他たくさん(1000個以上)の拡張機能があるので,興味があれば「chrome拡張 おすすめ」で検索するといいかも.

chrome拡張機能 ボタンの場所
chrome拡張機能の例

しかも拡張機能は自分で作ることができます.
こんな拡張機能があったら便利なのに」と思ったら,自分で作ってしまいましょう

ただ,chrome拡張機能は単なるWebアプリケーションと違い,少し実装が面倒臭いところがあります(制約とか制約とか制約とか...)

というわけで,システム構成図を用いて簡単に解説しようというのが,本記事の趣旨です.

スポンサーリンク

システム構成について

以下,chrome拡張機能のシステム構成を表した図になります

chrome拡張機能 全体のシステム構成図
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コメントがあれば,もしかしたらコード解説+公開するかも...

↓参考サイト(ありがとうございます)

Chrome Extension の作り方 (その1: 3つの世界) - Qiita
弊社の「自動化チーム(4人)」では、主にGoogle Apps Scriptを使って業務の自動化・効率化に取り組んでいるのですが、「Chromeのエクステンションも使えるようになったら強いよね」ということで、チームで一番エクステンショ...
おーよしの紹介
院卒Webエンジニアマン

「プログラミング」や「開発技術」,「ガジェットの紹介」について情報発信してます.これからのIT時代を生き抜くため,自分のスキルを磨き続けます.

oyoshiをフォローする
このエントリーをはてなブックマークに追加
ITJavaScriptプログラミング開発
スポンサーリンク
にほんブログ村に参加中(^~^)
PVアクセスランキング にほんブログ村
おーよしのDevLog

コメント

タイトルとURLをコピーしました