2010年11月22日

初めてのGoogle Chrome Extension

ちょっとGoogle Chrome Extensionを作り始めたのでメモ。

まずは、開発者用かベータ版のGoogle Chromeが必要。


Google Chrome(BETA)

メニューのレンチアイコン→Tools→拡張機能 から拡張機能管理を開く。

右上の『デベロッパー モード』を有効にすると『パッケージ化されていない拡張機能を読み込む』というボタンが表示されるので、これで開発が開始できる。

適当なフォルダに『manifest.json』と『icon.png』を用意する。先ほどの『パッケージ化されていない拡張機能を読み込む』でフォルダを指定、これで開発が開始できる。

アイコンを表示する簡単な拡張

manifest.jsonの内容を次のようにするとアイコンがブラウザに表示される。

{
"name": "simple Browser Extension",
"description": "This extension adds browser icon.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
}
}


これはブラウザアクション(ボタンが押された際に何か実行したい)を制御するボタン

アイコンを表示する簡単な拡張2

『manifest.json』を次のように変更

{
"name": "simple Page Extension",
"description": "This extension adds Page icon.",
"version": "1.0",
"permissions": ["tabs"],
"background_page": "background.html",
"page_action": {
"default_icon": "icon.png",
"default_title": "First icon"
}
}


新たに『background.html』を用意する。

<html>
<head>
<script>
chrome.tabs.onUpdated.addListener(function(tabid, inf){
if (inf.status === 'complete') {
chrome.pageAction.show(tabid);
}
});
</script>
</head>
<body></body>
</html>


これによりページアイコン(アドレスバーの横)が表示される。
posted by ねこまんま at 18:26 | Comment(0) | TrackBack(0) | Google Chrome Extension | 更新情報をチェックする