2012年8月17日金曜日

Page Actionを作成する


Browser Actionは常にアイコンが表示されるのに対し、Page Actionは特定のWebサイトのみアイコンを表示させます。

必要なことは以下の2つ。

  • tabが切り替わった通知を受けるためにListenerを登録
  • manifest.jsonにpage_actionを記述


tabが切り替わった通知を受けるためにListenerを登録


Listenerに登録するモジュールをJavaScriptファイルに記述します。

background.js
// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
console.log("checkForValidUrl");
  if (tab.url.indexOf("http://www.blogger.com/blogger") > -1) {
    // ... show the page action.
    chrome.pageAction.show(tabId);
  }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);


上記のようなJavaScriptを作成し、manifest.jsonの"background"に記述します。
Chromeのtab変更通知を受けるためにchrome.tabsをコールするので"permissions"も追加

  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs","http://*/*"
  ],


manifest.jsonにpage_actionを記述


Page Actionを指定するために、browser_actionからpage_actionに変更します。
tabのListener登録を含めると、以下のようなmanifest.jsonとなります。


{
  "name": "Page Action Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Page Action Extension Test.",
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs","http://*/*"
  ],
  "page_action":
  {
    "default_icon": "icon.png",
    "default_title": "this URL!",
    "default_popup": "popup.html"
 }
}


正常に動作すると、以下のようにアドレスバーの右端にアイコンが表示されます。


0 件のコメント:

コメントを投稿