わーくあうと！

日々の作業でためになったことをアウトプットすることで自分の成長につながればなと。

トップ > 5分で始めるGoogleChromeアドオン開発

5分で始めるGoogleChromeアドオン開発

最近自宅のPCでもFireFoxからGoogle chromeに乗り換えているんですが、chromeいいですね！
Google chromeが出始めの頃はじめて使ったときはすごく独特なUIに感じて「なんだこの使いにくブラウザは！ぷんぷん！」と思っていたのですが慣れると邪魔なスペースを取らずにすっきりしていていいですね。FireFoxと違ってアドオン入れまくってももっさりしないし。使っていてすごく気持ちがいいブラウザです。昇天してしまいそうです。

ということでアイコンをクリックするとハローワールドするアドオンを開発してみます。

フォルダ作成

まずは適当なところに好きな名前（今回は「helloworld」とします）でフォルダを作成します。

定義ファイル作成

「helloworld」フォルダの中に「manifest.json」を作成します。
manifest.json

{
	"name": "ハローワールド",
	"version": "1.0",
	"description": "説明文が入ります",
	"permissions": [
	],
	"browser_action": {
		"default_title": "クリックでポップアップ",
		"popup": "popup.html"
	}
}

ポップアップ用のhtml作成

「helloworld」フォルダの中に「popup.html」を作成します。
popup.html

<html>
<head>
</head>
<body>
	<div>
		hello, world!
	</div>
</body>
</html>

最終的なフォルダ階層はこんな感じ。

  • helloworld
    • manifest.json
    • popup.html

なんとこれで完成です。

あとはGoogle chromeで「chrome://extensions/」にアクセスしてデベロッパー モードをクリックして、パッケージ化されてない拡張機能を読み込みます〜みたいなボタンをクリックしてさっき作成した「helloworld」フォルダを指定してokしたらアドオンがGoogle chromeにインストールされます。
完成したアドオンはこんな感じ。
f:id:ccoo_nick:20101031013240p:image
アイコンを指定していないのでアイコンは出ませんが、それらしき所をクリックするとpopup.htmlが表示されます。簡単でしたね。
もっといろんな事がしたい！と思ったらGoogle Chrome Extensions（英語）とかを見れば大抵のことはできるはずです。ただ僕みたいに英語全然ヨメナイヨーな方は切ないかも。誰か日本語訳をしてくれー