Chrome拡張機能を自作する

みなさんは業務で開発を行う中で、Chromeの拡張機能を使った事がありますか？
おそらく、ほとんどの方が使った事があると思います。

そんな便利なChrome拡張機能ですが、実は簡単に自作する事が出来ます。
という事で今回は、その方法を紹介します。

■はじめに

Chrome拡張機能はHTML、CSS、Javascriptで作られています。必要なそれらのファイルと、Manifest Fileというファイルを1つのフォルダにまとめる事で、機能します。

■Manifest File

Chrome拡張機能を動かすには、Manifest Fileが必要です。Manifest Fileとはその拡張機能に関する情報を書くものでjson形式で書き、拡張機能のフォルダ内にmanifest.jsonという名前で配置します。
記載する内容は、主に以下の通りです。

• name : 拡張機能の名前

• version : 拡張機能のバージョン

• manifest_version : マニフェストのバージョン

• description : 拡張機能の説明（任意）

• cotent_scripts : どのサイトで、どのスクリプトを、どのタイミングで動かすかなど

■開発

実際に開発していきます。
※今回は動かしてみる事が目標なので、ページ遷移時にアラートで「Hello World!」と表示させる拡張機能を作ります。
適当なフォルダを作成し、その中にmanifest.json(Manifest File)とaddon.jsを作成します。

●addon.js

$(function(){
    window.alert("Hello World!");
});

●manifest.json

{
    "name": "HelloWorld!",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "拡張機能動作確認。",
    "content_scripts": [
        {
            "matches": ["http://*.jp/*"],
            "js": ["addon.js"],
            "run_at": "document_idle"
        }
    ]
}

■Chromeで読み込む

Chromeでchrome://extensions/にアクセスし、右上の『デベロッパーモード』をONにします。
『パッケージ化されていない拡張機能を読み込む』が上に現れるので、クリックして作成したフォルダを選択します。
すると、自作した拡張機能が表示されるのでONにします。
Manifest Fileで"matches": ["http://*.jp/*"]と記述したので、該当するWebサイトにアクセスすると、アラートで「Hello World!」と表示されるはずです。

■まとめ

いかがでしたでしょうか。とりあえず動かしてみただけですが、とても簡単にChrome拡張機能を自作出来るという事が分かったかと思います。
みなさんも時間がある時は、便利な拡張機能を自作してみてはいかがでしょうか。自作した際は、是非共有してください！