Chrome Extensionの作り方講座その2・BrowserActionを使ってみる

さてChromeExtensionの作り方2週目。今週はブラウザアクションを使ってみましょう。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う



BrowserAction


BrowserActionおよびPageActionはボタンとして表示される部分です。
ボタンを押すと一枚htmlが開かれ、そこでJavaScriptを実行できます。

そのためにはmanifest.jsonにBrowserActionの設定が必要となります。
こんな感じですかね。

[javascript]
{
"manifest_version": 2,

"name": "test",
"description": "test",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
[/javascript]

そしてpopup.htmlは自分の好きに作りましょう。
今回は例としてjavascriptも用意しておきます。

htmlはこんな感じ。

<html>
<head>
</head>
<body>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>

popup.jsはこんな感じ。
[javascript]
document.write("Hello, Chrome Extension!");
[/javascript]

後は適当にアイコンを作って、manifest.json、popup.html、popup.js、icon.pngの4つをフォルダに入れておきましょう。
リリースしないでただ作るだけならこれだけで十分。

Chromeの拡張機能画面からデベロッパーモードのチェックをつけて、「パッケージ化されていない拡張機能を読み込む」から今のフォルダを選択。
そうすれば読み込まれるはずです。

なお、popup.htmlとかのファイルを更新したらこの画面の「リロード」を選択すれば再読み込みしてくれます。

拡張ボタンに先ほどのiconが表示されたらクリックしてみましょう。
Hello, Chrome Extension!と表示されるかと思います。
chromeext2

もちろん同じフォルダにjquery入れればちゃんと読み込みも使うこともできます。

なお、この画面をデベロッパーツールでデバッグしたい場合はボタンを右クリックして「ポップアップを検証」を押してください。
該当のpopup.htmlが新しいウィンドウが開かれます。

今回はここまで。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
developer.chrome.com/extensions