普通に使っているものの、書いたことの無かったGoogle Chrome Extensions(拡張機能)。ちょこっと調べてみたところ、HTMLとJavaScriptが分かれば相当お手軽に作れるということが分かりやってみました。
いくつか種類があるのですが、その中でも「Browser Action」という、ツールバーのアイコンをクリックすると動くやつが手軽そうです。
それでは、ツールバーのアイコンをクリックすると、「Hello World!」と表示するだけの簡単なものを作ってみましょう。
１．アイコンを用意する
ツールバーに表示するために19×19(px)の画像
を用意します。拡張機能一覧で表示するためのアイコンは48×48(px)の画像で、無くても動くので今回は用意しません。
２．マニフェストファイルを作成する
「manifest.json」という名前で以下のように作成します。
{
//拡張機能の名前
"name": "Hello World!",
//拡張機能のバージョン
"version": "1.0",
//決まりごとで今は2に設定
"manifest_version": 2,
//拡張機能一覧に表示される説明
"description": "Hollo Extensions!",
"browser_action": {
//先ほど用意したアイコン
"default_icon": "icon.png",
//アイコンにマウスオーバーした際に表示される文字
"default_title": "Hello World!",
//Hello Worldを表示するHTMLファイル
"default_popup": "hello.html"
}
}
３．Hello Worldを表示するHTMLを作成する
styleにmin-widthを設定しないと、変なところで改行されるので「body」に設定します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charaset="utf-8"> </head> <body style="min-width:200px"> <h1>Hello World!</h1> </body> </html>
４．Chromeに登録する
もうあとはChromeに登録するだけです。
アイコンとマニフェストファイルとHTMLを一つのフォルダに放り込み、以下手順で登録します。
メニューから「ツール」の「拡張機能(E)」を開きます。
「デベロッパーモード」にチェックを入れ、「パッケージ化されていない拡張機能を読み込む」から該当のフォルダを選択します。
すぐ下の部分に表示されたら登録成功です。
ちなみに、拡張機能を修正したりした場合は、ここの「リロード（Ctrl+R）」をクリックすると変更が反映されます。
５．実行する
うまくいきました。
しかし、Hello Worldなんて今も使うんですかね？？
0 コメント:
コメントを投稿