Chrome拡張機能の開発入門(概要編)

本ページでは、Chrome拡張機能の開発方法について解説します。

拡張機能の開発において最低限知っておくべき基本的な情報をまとめたもので、初心者向けの内容となっています。

Chrome拡張機能の基本構造

Chrome拡張機能はManifest File (JSON)を中心に、Javascript、HTML、css、pngなどのファイルで構成されます。
これらのファイルを一つのフォルダにまとめたものが一つの拡張機能となります。

以下は、Chrome拡張機能の基本的な構造となります。
なお、manifest.json以外のフォルダやファイルは任意の名前をつけることができます。

folder/(拡張機能のルートフォルダ)
 └ manifest.json ← 拡張機能のManifest File(JSON)
 └ js/(スクリプト用のフォルダ)
   └ script.js ← 拡張機能で実行するスクリプト(Javascript)
 └ icons/(アイコン用のフォルダ)
   └ icon.png ← 拡張機能のアイコン(png)

このフォルダをzip形式で圧縮しアップロードすることで、ストアで公開することができます。

Manifest File

Chrome拡張機能ではManifest Fileを必ず用意する必要があります。
具体的には、manifest.jsonという名前のJSONファイルを、拡張機能のルートフォルダに配置します。

Manifest Fileはその拡張機能に関する情報がJSON形式で記されたファイルです。
このファイルには、拡張機能の名前、バージョン、作成者名、説明、アイコン画像、実行するスクリプトや表示させるページ、Chrome APIを用いるためのアクセス許可設定などを記述します。

以下は、Manifest Fileの記述例です。

{
  "manifest_version": 2,  // マニフェストのバージョン。(現在有効なのは2のみなので、とりあえず2と記述しておけばOK)
  "name": "自作の拡張機能",  // 拡張機能の名称
  "version": "1.0.0",  // 拡張機能のバージョン
  "author": "作成者名",  // 拡張機能の作成者名
  "description": "自分で開発したオリジナルの拡張機能です。",  // 拡張機能の説明文
  "icons": {
      "16": "icons/16.png",  // 拡張機能のアイコン(サイズ毎のアイコンファイルを用意)
      "48": "icons/48.png",
      "128": "icons/128.png"
  },
  "content_scripts": [{
      "matches": ["https://www.example.com/*"],  // Content Scriptを実行するURL
      "js": ["js/script.js"]  // 上記URLへのアクセス時に実行されるスクリプト
  }],
  "browser_action": {
      "default_title": "自作の拡張機能",  // 拡張機能のアイコンをホバーしたときに出るテキスト
      "default_popup": "index.html"  // 拡張機能アイコンをクリックしたときに表示されるページ
  }, 
  "permissions": ["activeTab", "contextMenus", "storage"]  // 拡張機能で使用するAPIのアクセス許可
}

Content Scripts

Chrome拡張機能は、Content Scriptsと呼ばれるスクリプトを任意のページ(Manifest Fileの”matches”で指定したURL)で実行することができます。

なお、Content Scriptsという名前ですが、スクリプト(Javascript)の他にcssを適用することも可能です。

"content_scripts": [{
    "matches": [""],  // Content Scriptを実行するURL(この場合はあらゆるURLで実行)
    "js": ["script.js"],  // 上記URLへのアクセス時に実行されるスクリプト
    "css": ["myStyles.css"]  // 上記URLへのアクセス時に呼び出されるcssファイル
}],

Content Scriptsで実行されるJavaScriptは、対象ページのDOMへ自由にアクセスすることができますが、対象ページのJavaScriptへは直接アクセスすることができません(ページ内で定義されているJavaScriptの変数や関数へのアクセスは不可)。

また、Chrome APIについても一部のものしか使用することが出来ません。

Background Page(Event Page)

Chrome拡張機能は、Background Pageと呼ばれるバックグラウンドで動くページ(もしくはスクリプト)を持つことができます。

Background Pageでは、継続的に動作させたい処理や重たい計算処理、ファイルのダウンロードなど時間がかかる処理などを行いたい場合に利用します。

また、Content Scriptsでは一部のAPIしか使えないという制約がありましたが、Background PageではアクセスできるAPIの制限がありません。

Manifest Fileに以下のように記述すると、拡張機能の起動と同時に指定したスクリプトがバックグラウンドで動作を開始します。

"background": {
    "scripts": [ "background_script.js" ],  // バックグラウンドで動作させるスクリプト
    "persistent": true  // バックグラウンドに常駐させるかどうか(従来通りのBackground pageにするかどうか)
},

このように便利に見えるBackground Pageですが、これは常にバックグラウンドで動き続けるため、メモリを常に占有してしまうというデメリットがあります。
そこで用意されたのがEvent Pageです。

Event PageはBackground Pageと同じようにバックグラウンドで動作するものの、必要な時だけメモリ上にロードされ動作が完了するとアンロードされるという性質なので、メモリを常に占有することはありません。
そのため、常駐させる必要のない処理ではなるべくEvent Pageを利用することが推奨されています。

Event Pageを利用するには、Manifest File (manifest.json)へ以下のように記述します。

"background": {
    "scripts": [ "background_script.js" ],  // バックグラウンドで動作させるスクリプト
    "persistent": false  // 常駐させないEvent Pageにする
},

Browser ActionとPage Action

Browser ActionやPage Actionを設定すると、ブラウザの右上に拡張機能のボタンが表示されます。

このボタンは、クリックした時にポップアップを表示させることができます。
表示させるポップアップはhtmlファイルを指定します。

常にアクションを起こしたい場合はBrowser Action、特定のページにおいてのみアクションを起こしたい場合はPage Actionを使用します。

Manifest Fileの記述は以下のようになります。ここで設定したhtmlファイル(popup.html)がポップアップで表示されます。(Page Actionの場合は”browser_action”を”page_action”に書き換えます。)

"browser_action": {
    "default_icon": {
        "19": "icon19.png"
    },
    "default_popup": "popup.html"
}

上記の他に、Content ScriptやBackground Page側からbrowserAction.setPopupでポップアップを設定することも出来ます。(Page Actionも同様)

Permissions

拡張機能でAPIを使用する場合、Manifest Fileのpermissionsでアクセス許可を設定する必要があります。

以下の表はその一例となります。
その他のpermissionsについては、公式ドキュメントをご確認ください。

activeTab アクティブなタブにアクセスする場合
bookmarks ブックマークにアクセスする場合(chrome.bookmarks)
contextMenus コンテキストメニューにアクセスする場合(chrome.contextMenu)
cookies Cookieにアクセスする場合(chrome.cookies)
fontSettings Chromeのフォント設定にアクセスする場合(chrome.fontSettings)
history 履歴にアクセスする場合(chrome.history)
storage ユーザーデータの保存・読み取りを行う場合(chrome.storage)

公開前の拡張機能をインストールする方法

開発中の動作確認など、ストアへ公開する前に拡張機能をインストールしたい場合があると思います。

公開前の拡張機能をインストールするには、まずChrome設定の「拡張機能」画面へ行き、右上にある「デベロッパーモード」を有効にします。

デベロッパーモードを有効にすると下の画像にあるようなボタンが現れるので、この中の「パッケージ化されていない拡張機能を読み込む」をクリックします。

Chromeのデベロッパーモード

Chromeのデベロッパーモード

するとフォルダ選択のダイアログが現れるので、ここでインストールしたい拡張機能のルートフォルダを選択するとインストールが完了します。

拡張機能のサンプル

最後に、最小限の構成で作られた拡張機能のサンプルをご紹介します。
ページが読み込まれる度にアラートが表示されるという邪魔なだけの機能ではありますが(笑)、拡張機能の基本を理解するのに役立つかと思います。

まずは「sample_extension」というフォルダを作成し、その中にManifest File(manifest.json)とscript.jsという2つのファイルを作成します。

なお、manifest.jsonとscript.jsの文字コードは共にutf-8で保存してください。
他の文字コードで保存すると、拡張機能のインストールに失敗するので注意が必要です。

sample_extension/(拡張機能のルートフォルダ)
   └ manifest.json ← 拡張機能のManifest File(JSON)
   └ script.js ← 拡張機能で実行するスクリプト(Javascript)

Manifest File(manifest.json)の中身は、以下のように記述します。

なお、ここでは最小限の構成とするため省略していますが、実際に拡張機能を公開する際には、”author”(作成者名)や”icons”(アイコン)等も設定した方が良いでしょう。

{
  "manifest_version": 2,
  "name": "Sample extension",
  "version": "1.0.0",
  "description": "拡張機能のサンプルです。",

  "content_scripts": [
    {
      "matches": [ "" ],   // Content Scriptを実行するURL(この場合はあらゆるURLで実行)
      "js": [ "script.js" ]   // 上記URLへのアクセス時に実行されるスクリプト
    }
  ]
}

script.jsの中身は、以下のように記述します。
アラートを表示させるだけなので、たった1行のコードです。

alert("メッセージのサンプルです。");

これで拡張機能のファイルは準備出来たので、これを前項の手順でデベロッパーモードからインストールします。
インストールが完了すると、以下のように拡張機能(Sample extension)が登録されます。

インストールされたSample extension

インストールされたSample extension

この拡張機能を有効にした状態で何らかのWebページを開いてみてください。
以下のようなアラートが表示されると思います。

Sample extensionによって表示されたアラート

Sample extensionによって表示されたアラート

コメント

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