Chrome Extension開発を勉強してみる (6) - Page Action -

2012-07-13T00:00:00+09:00 Chrome Extension JavaScript

ページアクションを使ってみる。ページアクションって何なの?として

てな感じでURLバーの右側に付けられるアイコンをクリックする事でポップアップなページを出せる事が出来る模様。但し、グローバルに常に出すような場合にはページアクションではなくブラウザアクションを採用するのが正しい模様。とりあえず上記の[S]なアイコンが出せるまでをやってみる

manifest.json

{
  "name": "test",
  "version": "0.1",
  "page_action": {
    "default_icon": "icon_blue.png",
    "default_title": "test",
    "default_popup": "popup.html"
  },
  "background_page": "background.html",
  "permissions": ["tabs"]
}

アイコンは常に出ない((chrome.pageAction.showしないと))のでバックグラウンドページを用いて表示しているタブを監視して、そこからpageAction.showをする

background.html

<html>
  <body>
    <script type="text/javascript">
(function() {
  chrome.tabs.onUpdated.addListener(function(id, changeInfo, tab) {
    if (/^http/.test(tab.url)) {
      chrome.pageAction.show(id);
    }
  });
})();
    </script>
  </body>
</html>

popup.html

<html>
  <body>
    <div id="title"></div>
    <script type="text/javascript">
(function() {
  chrome.tabs.getSelected(undefined, function(tab) {
    var elm = document.createElement("h4");
    elm.innerText = tab.title;

    document.getElementById("title").appendChild(elm);
  });
})();
    </script>
  </body>
</html>

追記

別にdefault_popupは必須では無いらしい。あくまで必須なのはアイコンだけな模様なので。じゃあページアクションをクリックした際はどうするのかというと、バックグラウンドページ内でページアクションをクリックした際に発動する処理をやっちゃえば良い。それはchrome.pageAction.onClickedでイベントをぶっこめる

<html>
  <body>
    <script type="text/javascript">
(function() {
  chrome.tabs.onUpdated.addListener(function(id, changeInfo, tab) {
    if (/^http/.test(tab.url)) {
      chrome.pageAction.show(id);
    }
  });

  chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.captureVisibleTab(undefined, function(dataUrl) {
      chrome.tabs.create({ "url": dataUrl, "selected": false });
    });
  });
})();
    </script>
  </body>
</html>

という感じ。正確にはshowをした際のタブとページアクションをクリックした際のタブが同じのかっていうのを検証する必要はあるとは思う

Chrome Extension開発を勉強してみる (5) - content script + background page -