さてChromeExtensionの作り方２週目。今週はブラウザアクションを使ってみましょう。
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の４つをフォルダに入れておきましょう。
リリースしないでただ作るだけならこれだけで十分。
Chromeの拡張機能画面からデベロッパーモードのチェックをつけて、「パッケージ化されていない拡張機能を読み込む」から今のフォルダを選択。
そうすれば読み込まれるはずです。
なお、popup.htmlとかのファイルを更新したらこの画面の「リロード」を選択すれば再読み込みしてくれます。
拡張ボタンに先ほどのiconが表示されたらクリックしてみましょう。
Hello, Chrome Extension!と表示されるかと思います。
もちろん同じフォルダにjquery入れればちゃんと読み込みも使うこともできます。
なお、この画面をデベロッパーツールでデバッグしたい場合はボタンを右クリックして「ポップアップを検証」を押してください。
該当のpopup.htmlが新しいウィンドウが開かれます。
今回はここまで。
