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

Author:
browser_action

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

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

{
  "manifest_version": 2,

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

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

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

htmlはこんな感じ。

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

popup.jsはこんな感じ。

document.write("Hello, Chrome Extension!");

後は適当にアイコンを作って、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

Share on Facebook
Pocket