Browsing articles tagged with " エクステンション"
3月
9
2010
9
2010
Google ChromeエクステンションのHello world
Google Chromeの拡張はFirefoxのアドオンと違ってものすごく作りやすいです。JavaScript, CSS, HTMLあたりの知識だけで作れますからねぇ。
そんなわけで、超ミニマムなGoogle Chrome拡張のHello Worldです。
フォルダ構成
フォルダ構成は、以下のような感じです。
HelloWorld ├ icon.png ├ manifest.json └ popup.html
ちなみに、今回使用したicon.pngはこちら→
Google Chromeのロゴですね！
メイン部の作成
manifest.json
{
"name": "HelloWorld",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png",
"default_tilte": "Helllo World",
"popup": "popup.html"
}
}manifest.jsonはJSON形式のファイルで、拡張の情報を定義します。ほとんど見て分かると思いますが、name, versionはそれぞれ拡張の名前とバージョンです。browser_actionとは、アドレスバーの横にアイコンを出して、それをクリックすることでポップアップやツールチップがでるもののことです。今回は、これでHello Worldを実現します。
popup.html
<html>
<head>
</head>
<body>
<div id="content">
<span id="heading" class="heading">Hello World!</span>
</div>
</body>
</html>
popup.htmlは、上記のようにします。
インストール
あとは、chrome://extensions/ にアクセスして、デベロッパーモードから「パッケージ化されていない拡張機能を読み込みます。」をクリックし、今作成した拡張をインストールします。
成功すると、右上にこんな感じでアイコンが出てきているはずです。それがGoogle Chromeのエクステンションです。おめでとうございます！
さらなる情報は、プログラマの方なら本家サイトのAPIを見るのが一番早いかなーと思います。
それではよいGoogleライフを！
おすすめ書籍
 |
JavaScript 第5版 村上 列 オライリー・ジャパン 2007-08-14 |
 |
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 水野 貴明 オライリージャパン 2008-12-22 |
参考リンク
An article by yuyak 
Now loading...