拡張機能を作るために必要なもの

Chrome Extensionを作るにあたってに必要なものを下記に示します。

manifest File(manifest.json)
Content Script
Event / Background Page処理
Browser/Page Action処理

manifest Fileについて

これから作るChrome Extensionの設定をするファイルです。必ず作成する必要があります。この設定ができればあとはhtml、css、jsを編集するだけで作成ができます。

ざっとmanifest.jsonのサンプルを載せておきます

Manifest.json

{
    "manifest_version": 2(基本的に2がおすすめらしい),
    "name": "拡張機能の名前(任意)",
    "version": "任意の数字(0.1とか)",
    "description": "拡張機能の説明",
    "content_scripts": [
        {
            "matches": [
                拡張機能が動作するサイトの設定
            ],
            "js": [
                "スクリプトの設定"
            ]
        }
    ],
    "icons": {
        "32": "画像を指定"
    },
    "background": {
        "scripts": [
            "スクリプトの設定"
        ],
        "persistent": true
    },
    "browser_action": {
        "default_title": "任意"
    },
    "permissions": [
        使用する機能の設定
    ]
}

拡張機能を作るために必要な概念(各スクリプト)の説明

Content Script

Content Scriptはブラウザに表示されているページの目に見える部分に対して動作するスクリプト
例)背景の色を変える、ボタンの大きさを変える、etc....

Content Scriptは独立して動作し、他の拡張機能で動作するスクリプトやブラウザで表示しているスクリプトとの競合は起こしません。

Content Scriptの特徴

できること
DOMの操作ができる
できないことアクセスできるAPI(使用できるChromeAPI)が限られている

Event / Background Page

Event / Background Pageの特徴

Chromeを使用している間動作しているスクリプトです。

ココに記載されているライブラリを使用することすることができます。
Content Scriptの動作はブラウザで目に見えてわかりますが、これはChromeが動いている間ずっと目に見えない部分で動いています。

Event Pageと Background Pageの違い

Event Page
目に見えない部分で動作し、呼ばれた際にだけ動作を行う。
Background Page
目に見えない部分で動作し、拡張機能をインストールしてからもしくはChromeを起動してから基本的に常に動作を続けます。

Background Pageは常に動作しメモリを消費することに対し、Event Pageは呼ばれた時のみ動作するので現在は主にEvent Pageの使用が推奨されているようです。

manifest.jsonで"persistent"の項目を指定することでEventとBackgroundの切り替えが可能です。

trueならBackground falseならEventとなります

manifest.json

"background":{
    "scripts":[
      "background.js"
    ],
    "persistent": false
  }

Browser/Page Action

拡張機能をインストールするとブラウザの右上に拡張機能のアイコンが表示されます。
Browser Actionはアイコンがクリックされた時に何かの処理をさせることができる。使えるAPIはEvent/Background Pageと同様

簡単にまとめると

Content Scriptはブラウザの目に見える部分に動作します。
Event / Background Pageは目に見えない部分で動作します。
Browser Actionはアイコンがクリックされた時に動作します。

ファイル構成について

特にファイル構成に指定はありませんが、個人的に作成する中でいいなと思った構成です。

$ tree
.
├── README.md
├── content
│   └── content.js
├── event
│   └── event.js
├── icon
│   ├── icon_32.png
│   └── icon_48.png
├── log
│   └── log.txt
└── manifest.json

おまけ

今回僕が作成したChrome Extensionの構成は下記のようになっています。

行った処理は閲覧したサイトの名前、URL、日時を取得する機能です。自分のブラウザ使用履歴を記録するために使用していますが、そのうち複数ユーザの履歴を取得しようと思います。

はてなブログもお願いします。

これからChrome Extensionを作る人が絶対に知っておくべき知識

目次