chrome.browserAction.onClicked.addListenerとpopupが共存してくれない件。

かなり行き詰ったポイントなので、メモ代わりに書き込み。

最近、Google Chromeの拡張機能（Extension）の制作をしてます。実装言語はJS＋HTMLで、Webページを作るような（？）感覚で出来上がるので簡単にできます。
・・・・・と思ったのが1か月程前。やってみると独自のメソッドがよー分からんかったり、日本語で書かれてるめぼしいドキュメントがあまりなかったりと、かなり苦労しました。英語がスラスラ読めるようになりたいっ＞＜
あ、ちなみにExtensionのリファレンスの非公式日本語訳のページはあります。しかし、俺がそれを発見したのは苦労して原文リファレンスを読み切った後でしたorz

そして、本題である開発中にハマった部分についてのメモ。
ブラウザーアクション（browserAction）で、右上に出るバッジをクリックするとポップアップメニューを出すように設定してあると、バッジをクリックしたときのイベントを受け取るリスナー chrome.browserAction.onClicked.addListener(function(tab)) が発動しなくなるんですね。

実例を出してみます。ここで取り上げているソースは、Chrome Extensionの公式リファレンスのSamplesにある、「A browser action which changes its icon when clicked.」からの引用です。
まず、manifest.jsonを見てみます。

{
  "name": "A browser action which changes its icon when clicked.",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*"
  ],
  "browser_action": {
      "name": "Click to change the icon's color"
  }
}

{

"name": "A browser action which changes its icon when clicked.",

"version": "1.0",

"background_page": "background.html",

"permissions": [

"tabs", "http://*/*"

"browser_action": {

"name": "Click to change the icon's color"

}

そして、background.htmlがこちら。

<html>
<head>
<script>
  var min = 1;
  var max = 5;
  var current = min;

  function updateIcon() {
    chrome.browserAction.setIcon({path:"icon" + current + ".png"});
    current++;

    if (current > max)
      current = min;
  }

  chrome.browserAction.onClicked.addListener(updateIcon);
  updateIcon();
</script>
</head>
</html>

<html>

<head>

var min = 1;

var max = 5;

var current = min;

function updateIcon() {

chrome.browserAction.setIcon({path:"icon" + current + ".png"});

current++;

if (current > max)

current = min;

}

chrome.browserAction.onClicked.addListener(updateIcon);

updateIcon();

</script>

</head>

</html>

バッジをクリックするたびにバッジの色が変わる、という動きしかない分かりやすいソースです。background.htmlにクリックイベントを受け取るリスナーが登録されていて正常に動くのですが、manifest.jsonにこんな風に書き加えると、とたんに動かなくなります。

{
  ...
  "browser_action": {
      "name": "Click to change the icon's color",
      "popup": "popup.html"  //バッジをクリックしたらpopup.htmlが現れるよう設定。
  }
}

{

...

"browser_action": {

"name": "Click to change the icon's color",

"popup": "popup.html" //バッジをクリックしたらpopup.htmlが現れるよう設定。

}

もちろん、popup.htmlはあるものとして書いてあります。
このように書き加えると、chrome.browserAction.onClicked.addListener(updateIcon);は反応してくれなくなるんですよね。
まぁクリックしたときの処理はpopup.html内に書き込めってことかもしれませんが、それだと処理が各所に分散しちゃいますね。popupにはロジックをあまり書き込みたくないです。
でもgetBackgroundPage()を使えば、popupからバックグラウンドのファイルの中を見れるので分散は防げますね。それでも余計な呼び出しがpopupに残るので納得行きませんが・・・！

バッジをクリックしたときに、XmlHttpRequestで別のページを非同期的に読み込む処理をbackground.htmlで行って、取得したデータをpopup.html内に組み込もうとしたのですが、popupとonClickedのリスナーが同時に使えないとなると、他に使えるかもしれないのはsendMessageとonRequestイベントでの通信ですかね・・・　まだ試してないので明日トライしてみますorz

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル