導入から公開まで13時間!Chrome拡張機能の開発[5of6]

本Chrome拡張は特定のページでのみ有効となるページアクションに対応したものです。ブラウザアクションというものもあります。いづれの場合にもオムニバー付近にChrome拡張のアイコンが現れてそのChrome拡張が有効であることをユーザに通知してくれます(アイコンの定義がないと通知されません)。

ユーザがアイコンをクリックすると拡張機能が起動されます。ポップアップWindowはそうしたUIの一つです。本Chrome拡張でもポップアップWindowを出しています。見た目(html)と動作(js)のファイルで構成されます。

popup.htmlのソースコード

<!DOCTYPE html>
<head>
<script src='jquery.js'></script>
<script src='popup.js'></script>
</head>
<body>
<div id="title">HWIS Cooker</div>
<button class="roundCorner" id=restoreAll>読み込み</button>
<button class="roundCorner" id=saveAll>書き出し</button>
<button class="roundCorner" id=clearAll>クリア</button>
<div id="status"></div>
</body>
</html>

popup.jsのソースコード

/*
* ポップアップ
*/

$(function(){
  $("button#restoreAll").live("click",function(){
  // クリックされたときコンテントスクリプトへリクエスト(メッセージ)を送付
	onSendRestoreRequest();
  });
  $("button#saveAll").live("click",function(){// クリックされたとき
  // クリックされたときコンテントスクリプトへリクエスト(メッセージ)を送付
	onSendSaveRequest();
  });
  $("button#clearAll").live("click",function(){// クリックされたとき
  // クリックされたときコンテントスクリプトへリクエスト(メッセージ)を送付
	onSendClearRequest();
  });
});

function onSendSaveRequest() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {greeting: "save"}, function(response) {
  // リクエスト(メッセージ)にsaveを入れて、選択タブに送付
  // 選択タブへのリクエストはコンテントスクリプトで受け取れる

//      console.log(response.farewell);
    });
  });
  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  $('#status').text("Saved.");
  setTimeout(function() {
	$('#status').text("");
  }, 750);
};

function onSendRestoreRequest() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {greeting: "restore"}, function(response) {
  // リクエスト(メッセージ)にrestoreを入れて、選択タブに送付
  // 選択タブへのリクエストはコンテントスクリプトで受け取れる
//      console.log(response.farewell);
    });
  });
  $('#status').text("Restored.");
  setTimeout(function() {
	$('#status').text("");
  }, 750);
};

function onSendClearRequest() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {greeting: "clear"}, function(response) {
  // リクエスト(メッセージ)にclearを入れて、選択タブに送付
  // 選択タブへのリクエストはコンテントスクリプトで受け取れる
//      console.log(response.farewell);
    });
  });
  $('#status').text("Cleared.");
  setTimeout(function() {
	$('#status').text("");
  }, 750);
};

(つづく>>>)

関連する記事

導入から公開まで13時間!Chrome拡張機能の開発[1of6]
導入から公開まで13時間!Chrome拡張機能の開発[2of6]
導入から公開まで13時間!Chrome拡張機能の開発[3of6]
導入から公開まで13時間!Chrome拡張機能の開発[4of6]
導入から公開まで13時間!Chrome拡張機能の開発[5of6]
導入から公開まで13時間!Chrome拡張機能の開発[6of6]

お世話になったリンク

Chrome Extensions API リファレンス
Sample Extensions – Google Chrome Extensions
ぷりんすの開発メモ: Chrome拡張機能のマニフェストVesrsion2対応についてのメモ
ChromeExtensionを作ってみる | ぼんぼるにっき
Chrome Extension でデバッグを行う – 日頃の行い
ハローワークの「求人情報検索」ページ