Page Actionを作成する

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

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

• 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"
 }
}

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

Pop Upを表示する

Browser Actionのアイコンをクリックした際、Pop Upを表示してみます。

以下のように、manifest.jsonに「"default_popup": "popup.html"」を追記します。

{
  "name": "Browser Action Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Browser Action Extension Test.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

以下のように、PopUpが表示されます。

Pop Upの中身はmanifest.jsonで指定したhtml内に記述します。

Google Chrome Extensionsを作成してみる

Google Chrome Extensionsを作成してみようと思い、以下の公式ページを参照しながら勉強中。
http://developer.chrome.com/extensions/getstarted.html

Chrome Extensionsに最低限必要なファイルは以下の２つ。

• manifest.json
• icon.png

manifest.jsonにはExtensionの名前やVersionなどを記載する。
以下のようなmanifest.jsonを作成してみます。

{
  "name": "Browser Action Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Browser Action Extension Test.",
  "browser_action": {
    "default_icon": "icon.png"
  }
}

chromeで読み込ませたところ、以下のようなアイコンが表示されました。