読者です 読者をやめる 読者になる 読者になる

kur.jp

バイオリンと自転車をこよなく愛するkurのチラシの裏。たまには技術的なことを書いたりするかも知れません。

XULでJavaScriptを含むUIをオーバーレイさせるときの注意点

Firefoxの拡張機能を作る時、UI部品をオーバーレイすることでFirefoxの画面内にボタンを追加したり、既存のUIにスクリプトを追加したりすることができる。

で、さっきブラウザのBackとForwardの隣にあるボタン、back-forward-dropmarker(下記の画像のように、押下するとこれまでのページ遷移履歴のリストが出てくる。)に対して操作したときに、スクリプトを実行させようと思ってXULのオーバレイを作っていたんですが、どうにもうまくいかない。具体的には、XUL内に書いたJavaScriptが実行されていない。

image

で、なんでかなーと思って悩んでたんですが、無事に解決したのでメモ。

最初に書いていたオーバレイさせるコードはこんな感じ。

<toolbarbutton id="back-forward-dropmarker" type="menu" chromedir="ltr"
      disabled="true" tooltiptext="最近表示したページ"
      onbroadcast="if (this.disabled) this.disabled =
      document.getElementById('Browser:Back').hasAttribute('disabled') &&
      document.getElementById('Browser:Forward').hasAttribute('disabled');">

でも、これじゃぁ、上手く実行されない。なんでだろう?と考えてみたところ、もしかしたら&がエスケープされてないんじゃないか?という考えに行きつきました。

通常、HTMLのなかで&のような特殊文字を書くときって、&amp;って書かないといけないんですよね。というわけで、上記のコードを下記のように書き換えてみたら、上手く動きました。

<toolbarbutton id="back-forward-dropmarker" type="menu" chromedir="ltr"
     disabled="true" tooltiptext="最近表示したページ"
     onclick="wt.my_func('list');"
      onbroadcast="if (this.disabled) this.disabled =
      document.getElementById('Browser:Back').hasAttribute('disabled') &amp;&amp;
      document.getElementById('Browser:Forward').hasAttribute('disabled');">

めでたしめでたし。