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拡張機能を自作出来るという事が分かったかと思います。
みなさんも時間がある時は、便利な拡張機能を自作してみてはいかがでしょうか。自作した際は、是非共有してください!