Firefox Archive

ローカルにXULファイルを作成し、Firefoxにドラッグしたときに以下のようなパーミッションに関するエラーが出る場合がある。
こはXPCOMが提供している機能にアクセスすると出るらしい。

Permission denied to get property XPCComponents.classes

これを出ないようにするには以下のコードを各イベントハンドラに書く。

netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

[via]
Mochitest - MDC

サンプルコード

もしも上記コードが書かれていないと、「const Ci = Components.interfaces;」のところでエラーになる。

<?xml version="1.0"?> <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?> <window id="my-xul" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button id="btn1" label="Press Me" oncommand="log('You pressed me!');"/> </hbox> <script type="application/x-javascript"> <![CDATA[ function log(){ netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); const Ci = Components.interfaces; const Cc = Components.classes; function firebug(method, args){ var windowManager = Cc['@mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator); var win = windowManager.getMostRecentWindow("navigator:browser"); if(win.FirebugConsole && win.FirebugContext) { var console = new win.FirebugConsole(win.FirebugContext, win.content); console[method].apply(console, args); } else if ( (win.Firebug || 0).Console ) { // Firebug 1.2~ win.Firebug.Console.logFormatted.call(win.Firebug.Console, Array.slice(args), win.FirebugContext, method); } else { return false; } return true; } function lognative(){ const ConsoleService = Cc["@mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService); ConsoleService.logStringMessage(arguments); } firebug('log',arguments) || lognative(arguments); } ]]> </script> </window>

log関数はgist: 11848 - GitHubから拝借。

前にFirefox拡張機能（Extention）の簡単な作り方メモで拡張本体をFirefoxとはまったく別のフォルダにおいておき、リンクファイルによって参照させると説明しましたが、それがまったく機能しなくなった。

たとえば以下のフォルダに

C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\hogehoge.dev\extensions

「dev@xuldev.org」みたいなリンクファイルを置いてFirefoxを起動すれば普通はアドオンを追加した旨をウィンドウ表示してくれるんだけど、それがうんともすんとも行かなくて、さらに既存の拡張を削除しようとしたけどFirefox再起動後に消したはずのアドオンが消えてないという現象も発生した。

直したファイル

まずextensionの情報を持っているファイルを洗ってみる。
まずはプロファイルのルートディレクトリに移動する。

C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\hogehoge.dev

そして以下のファイルを見てみる。

1. extensions.cache
2. extensions.ini
3. extensions.rdf

この3ファイルには今現在追加されているアドオンの情報がずら～と並んでて、ここに「入れたは良いがまったく動かないアドオン」に関する情報が発見された。

extensions.cache

3つあるうちのこのファイルに以下のように追加したけど動かないアドオンの情報がキャッシュされてた。
これがあるお陰で、extensionsフォルダにリンクファイルを入れたり出したりしてもFirefoxがうんともすんとも言わないわけだ。

app-profile dev@xuldev.org abs%C:\_\firefox\dev 1235540044

とりあえずこの1行を削除してFirefoxを起動してみる。

特になにも言われないので、再びリンクファイルをextensionsフォルダにドラッグしてFirefox再起動してみた。

これで「アドオン追加しました～」ウィンドウが出て、追加した機能も読み込まれた。

まとめ

いつのまにか動かなくなったので、原因の特定ができていないのだが、クロムマニフェストファイルの間違った表記じゃないかと思う。
ここいじってて動かなくなったので。

以下のように書かないとダメなのを、

content dev chrome/content/
overlay chrome://browser/content/browser.xul chrome://dev/content/my.xul

こんな風に間違えてchromeパスも含めてしまっていた。

content dev chrome/content/
overlay chrome://browser/content/browser.xul chrome://dev/chrome/content/my.xul

時間のあるときにもう一度検証してみよう！

Firefox拡張機能（Extention）の簡単な作り方メモではたくさんのブクマありがとうございますっ！
おかげでモチベーションが上がりましたので、この第2弾を書いてみたいと思います。

前回はFirefoxの拡張を作る上でベースとなる部分をご紹介しました。
ステータスバーにラベルを追加して、クリックすると設定画面で選択したラジオボタンの値が表示されるというものでした。

では、今回はと言いますと

1. ローカライズ - XULから日本語を排除
2. ポップアップウィンドウの表示
3. スタイルでデコレーション
4. -moz-bindingによるbindingで動的要素を分離

などなどです。

簡単に説明しますと、ローカライズはFirefoxが英語版でインストールされた場合は英語を、日本語版でインストールされた場合は日本語で表示するというものです。

ポップアップウィンドウは、例えば前回作成したステータスバーのラベルをクリックしたらピヨッとポップアップするウィンドウを表示させる感じです。
そのポップアップにスタイルを適用して、大きさや色を指定できたりもします。

最後のBindingは、XULファイルで外側の要素を指定しておきXBL（XMLファイル）のほうでその中身を作り上げるという考え方です。
例えるならカスタムコントールや、IEで古い表現をするならビヘイビアのようなものです。
（ちょっと違うかな･･･ｗ）

例えば

XUL屋さん：
　　「こうゆう機能がほしいからXBL屋さん作ってちょ」

XBL屋さん：
　　「もう出来てるよ。hogeってゆうidでbindingしてくれればすぐに使えるよ」

みたいに分担して作成するときにその効力を発揮します。
この辺はちょっと分かりにくいので作りながら一緒に考えて見ましょう！

また前回はソースを提供できなかったのですが、今回からソースを提供していこうと思います。

■ソース一式ダウンロード
Firefox Extention Hello

ローカライズ

まずは前回作成したhello.xulを思い出してください。

<?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://hello/content/hello.js" /> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, Firefox extension!!" onmousedown='Hello.alert()'/> </statusbar> </overlay>

ステータスバーに「Hello, Firefox extension!!」という文字を表示するように記述したと思います。
せっかくなので、ここはローカライズして日本語で表示するようにしてみましょう。

またボクの環境で恐縮ですが、

「C:\_\firefox\hello」ディレクトリの直下に「locale」フォルダを作成します。
その中に「ja-JP」フォルダを作成します。これは日本語バージョンという意味ですね。
まぁ今回は英語版はよしとして、とりあえず日本語版だけで進めてみます。

そして「ja-JP」フォルダの中に「hello.dtd」ファイルを作成してください。
dtdと言っているので、いっけんXMLの定義ファイルかと思うのですが、実は中には以下のように
hello.status.iconは「こんにちは」という文字だよというマッピングをしているファイルになります。

とりあえず以下の感じで記述してください。

<!ENTITY hello.status.icon "こんにちは">

前にもお話しましたが、日本語を扱う場合は必ずBOMなしのUTF-8（UTF-8N）で保存してくださいね。じゃなと文字化けしちゃいます。

chrome.manifestのローカライズ

前回作成したchrome.manifestファイルにlocaleパッケージを追加します。

content hello content/

locale hello ja-JP locale/ja-JP/

overlay chrome://browser/content/browser.xul chrome://hello/content/hello.xul

これで日本語版のFirefoxではja-JPフォルダの下にあるhello.dtdが読み込まれるようになります。

hello.xulファイルのローカライズ

↑のほうでも載せましたが、

<?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://hello/content/hello.js" /> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, Firefox extension!!" onmousedown='Hello.alert()'/> </statusbar> </overlay>

現状はこのようになっていると思います。

これにDOCTYPE宣言を追加して、ステータスバーのlabelの部分を修正していきます。

<?xml version="1.0"?> <!DOCTYPE overlay SYSTEM "chrome://hello/locale/hello.dtd"> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://hello/content/hello.js" /> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="&hello.status.icon;" onmousedown='Hello.alert()'/> </statusbar> </overlay>

のようにid="my-panel"のlabelを先ほどhello.dtdに記述したものに置き換えます。
「&」と「;」を忘れるとエラーになってしまうので、気をつけてくださいね。

Firefoxを起動してみる

今回はchrome.manifestファイルを修正しましたので、Firefoxを起動している場合は再起動してから確認してみてください。
どうでしょう？ステータスバーに「こんにちは」が表示されましたか？

この辺までは以外と簡単にいけちゃいますね。
もし他の言語にも対応させたい場合には、「ja-JP」フォルダ以外に各国のフォルダを配置すればOKです。

例えばこんな感じ、

content hello content/

locale hello ca-AD locale/ca-AD/
locale hello cs-CZ locale/cs-CZ/
locale hello de-DE locale/de-DE/
locale hello el-GR locale/el-GR/
locale hello en-US locale/en-US/
locale hello es-CL locale/es-CL/
locale hello es-ES locale/es-ES/
locale hello fa-IR locale/fa-IR/
locale hello fi-FI locale/fi-FI/
locale hello fr-FR locale/fr-FR/
locale hello gl-ES locale/gl-ES/
locale hello it-IT locale/it-IT/
locale hello nb-NO locale/nb-NO/
locale hello nl-NL locale/nl-NL/
locale hello pl-PL locale/pl-PL/
locale hello pt-BR locale/pt-BR/
locale hello ru-RU locale/ru-RU/
locale hello sr-RS locale/sr-RS/
locale hello sr-YU locale/sr-YU/
locale hello tr-TR locale/tr-TR/
locale hello zh-CN locale/zh-CN
locale hello zh-TW locale/zh-TW/

overlay chrome://browser/content/browser.xul chrome://hello/content/hello.xul

う～ん、一ヶ月経っても翻訳が終わらない気がしますねｗ
しかも、もうどこの言葉なのか全然分からないし。

ポップアップウィンドウの表示

ここでは外側のポップアップウィンドウを作成していきます。
ステータスバーの「こんにちは」をクリックしたら高さと幅が100pxのポップアップを表示します。
またもう一度クリックすることで非表示にするように調整してみましょう。

hello.xulの編集

まずはポップアップさせたいPanelの作成からです。
拡張がロードされたタイミングで作るので、以下のようにHelloクラスに関数を追加してください。

内容は、panelタグを作成し、その中にvboxという枠を作成しています。
vbox - MDC

このpanelタグがのちのちポップアップ表示をさせるときに必要になるタグなので、とっても大切です。
panel - MDC
（日本語のドキュメントもっとほしい･･･）

load: function(){ // パネル作る this._panel = document.createElement("panel"); this._panel.setAttribute("noautofocus", "true"); this._panel.setAttribute("noautohide", "true"); this._panel.id = "hello-panel"; var popupset = document.getElementById("hello-popupset"); popupset.appendChild(this._panel); // パネルの中身のポップアップウィンドウ作る this._popup = document.createElement("vbox"); this._popup.className = "hello-popup"; this._popup.text = ""; this._panel.appendChild(this._popup); },

そしてonloadを待つので、以下のコードをjsファイルの一番下とかに記述してください。

window.addEventListener("load", function(e) { Hello.load(e); }, false);

ここまで来たら後は簡単です、↑で作ったpanelをポップアップさせればよいのです。

ステータスバーの「こんにちは」をクリックするときの関数に手を加えます。

まずはhello.xulファイルのstatusbarpanelタグのonmousedownイベントにHello.onClickStatusbarIcon();と記述します。

<statusbar id="status-bar"> <statusbarpanel id="my-panel" label="&hello.status.icon;" onmousedown='Hello.onClickStatusbarIcon()'/> <popupset id="hello-popupset"></popupset> </statusbar>

そしてその関数をhello.jsに追加してみましょう。

onClickStatusbarIcon: function(){ this.isOpen = !this.isOpen ? true : false; if(this.isOpen){ var button = document.getElementById("status-bar"); // xul側 this._panel.openPopup(button, "before_end", 0, 0, false, false); }else{ this._panel.hidePopup(); } },

じゃじゃ～～～ん！
this._panelには先ほど作ったpanelが入っているので、そのpanelが持つopenPopupメソッドやhidePopupメソッドを呼び出しています。
this.isOpenプロパティは開いていれば閉じる、閉じていれば開くという排他の状態を提供しています。
openPopup - MDC

ではCtrl + Nで新しいウィンドウを開いて、「こんにちは」をクリック！

・・・

ん？何も表示されませんか？ｗ
いや、右下のほうに超小さいポップアップウィンドウがありませんか？
そうです。これがポップアップウィンドウなのです！！！！

小さいのには理由がありまして、単にスタイルが何も掛かっていないのでその大きさなのです。

では次に高さと幅を100pxのスタイルを適用してみましょう。

hello.cssの作成

contentディレクトリの直下に「hello.css」を作成してください。

中には

/* Popup */ .hello-popup { background: #FFFFFF; border: 3px solid #FAE89F; -moz-border-radius: 10px; padding: 1px; height: 100px; width: 100px; }

-moz-border-radiusという見慣れないプロパティがありますが、これは角丸を演出してくれるプロパティです。
100pxのブロックだとあんまり分からないかもしれないので、300pxとか大きい数値にしてみると面白いかもしれません。

ここで指定したhello-popupセレクタのとおり、実際にはvboxにスタイルを指定しています。
なので、panel自体はその中に包括している要素によって大きくなったり小さくなったりしているということですね。

ではまた「こんにちは」をクリックしてください！
今度はOKでしょうか？

なんかこれだけでもすごい達成感がありますね。

Bindingを使ってPanelの中に何か表示させてみる

ではまずbindings.xmlを作成していきます。
これも今までと同様にcontentディレクトリの直下に配置してください。

このファイルはのちのpanelの中身に表示する要素を持っているファイルになります。
本来でしたらxulファイルのほうに記述しとけばよさそうなのですが、panel要素やその中に表示しているvbox要素はJavaScript側でappendしています。

こうゆうときにvbox要素の中に表示したい内容を事前に用意（カスタムコントロール）しておいて、パチッとはめ込めるようにしておくと簡単じゃないでしょうか。

bindings.xmlの内容は以下のとおり。

<?xml version="1.0"?> <!DOCTYPE overlay SYSTEM "chrome://hello/locale/hello.dtd"> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="hello-popup-label"> <content> <xul:hbox align="center" flex="1"> <xul:description class="hello-label" tooltiptext="" value="&hello.popup.label;"/> </xul:hbox> </content> </binding> </bindings>

bindingタグ→contentタグの中にはhboxがあり、その中にdescriptionタグを用意しています。
bindingタグはバインドしたい単位で用意することが可能で、その中のcontentタグは実際にバインドするときの内容になります。

こちらもdescriptionタグのvalue属性の値をローカライズしています。

ではJavaScriptで追加したポップアップ（vbox）にこのbindings.xmlで定義した内容をどうやってbindするかという部分ですが、JavaScriptとCSSで実装します。

まずはJavaScript側。

onClickStatusbarIcon: function(){ this.isOpen = !this.isOpen ? true : false; if(this.isOpen){ // ここでbindings.xmlの中身を持つvboxをポップアップに追加 this._popup.appendChild(this.createHelloLabel()); var button = document.getElementById("status-bar"); // xul側 this._panel.openPopup(button, "before_end", 0, 0, false, false); }else{ this._panel.hidePopup(); // ポップアップを非表示したときに一緒に中の要素も削除 this.removeElements(this._popup); } }, createHelloLabel: function(){ var elem = document.createElement("vbox"); elem.className = "hello-popup-label"; return elem; }, removeElements: function(elem){ while(elem.firstChild){ elem.removeChild(elem.firstChild); } }

ステータスバーの「こんにちは」をクリックしたときの処理に少し手を加えます。
表示するときに呼ばれるcreateHelloLabelメソッドでは、まずvboxを作成しなぜかclassNameを指定しています。
このclassName指定がbindingを扱う場合の鍵となります。

removeElementsメソッドでは、ポップアップを消したときに一緒にポップアップの中身を消しています。
これをしないと毎回ポップアップするたびに「こんにちは」がappendされてしまうので、何個も連なってしまってちょっとかっこ悪いですもんね。

では次にhello.cssファイルを修正していきます。

/* binding */ .hello-popup-label { -moz-binding: url("chrome://hello/content/bindings.xml#hello-popup-label"); /* -moz-bindingでbindするよ */ margin: 0px; padding: 0px; }

この内容を追加してください。
hello-popup-labelセレクタはどこかで見たことがありますね。そうです、↑のJavaScript部分で指定したclassNameと一致しています。

つまりbindingのメカニズムは

JavaScriptから要素をappend
↓
classNameを指定
↓
CSSファイルのセレクタに該当する-moz-bindingが呼び出される
↓
bindings.xmlのbinding要素が紐付けられる

という仕組みになっているのです！
う～ん、ちょいややこしいですねｗ

「ただ1回覚えてしまえばどおってことはないので、みなさんbindingを使って要素を追加してみましょう！」

では最後にCtrl + Nで新規ウィンドウを表示。

こんな風なポップアップが表示されれば完成です。

■ソース一式ダウンロード
Firefox Extention Hello

まとめ

ほんのちょびっと機能を実装したいだけなのに、以外と面倒なことを覚えないといけないのが大変ですが、
これもオリジナルな拡張を作るための階段だと思えば楽なもんですっ！

また最後のbindingはちょいややこしいところはありましたが、使っていくと便利なので覚えておいて損はないと思います。
ただ、今回紹介した内容だといまいちその便利さが伝わらないと思いますので、次回Part3でもう少し掘り下げて説明してみたいとおもいます。
（説明できるか分かりませんが…ｗ）

次回：bindings.xmlの中の要素にJavaScriptからアクセスする方法などなど…

来年こそはJavaScriptまわりの記事をどんどん書いていこうと思いますので、是非よろしくお願いします。
それでは良いお年を〜！

■関連リンク
匿名コンテント - MDC
XBL 属性の継承 - MDC
content - MDC

追記：2009/01/30

HTML要素、属性、CSSのリファレンスをFirebugに追加

FireScope :: Firefox Add-ons

追記：2008/08/27

CookieをFirebugのコンソールに表示してくれる

Firecookie :: Firefox Add-ons

今後のメモのために。

HTMLのバリデイトを「ページのソースを表示」に統合

Html Validator :: Firefox Add-ons

ちょっとしたメモに大活躍

Google ノートブック

ブログで大活躍の色取得ツール

ColorZilla :: Firefox Add-ons

IEなくても大丈夫！IE5.5からIE8 beta 1として表示可能

IE NetRenderer :: Firefox Add-ons

CSSやJSだけを見たいときに便利

JSView :: Firefox Add-ons

Web開発では必須中の必須

Firebug :: Firefox Add-ons

Web開発であると便利な機能盛り合わせ

Web Developer :: Firefox Add-ons

画面内のリンク一覧を別ウィンドウで表示

Link Gopher :: Firefox Add-ons

リンク切れなどを探すときに便利

Link Evaluator :: Firefox Add-ons

Livedoor Readerの購読数を表示

miniturbo.org - LDRカウンタ

TwitterをFirefoxで手軽に見れる

TwitterFox :: Firefox Add-ons

もうこれなしでTumblrを使えない

TomblooUsage - tombloo - Google Code

これ以外にもいろいろとお試しで入れているので、画面がごちゃごちゃしているがFirefox2のときほど重くないのがFirefox3のありがたさですね。

遂に来ました！
Firefox3のダウンロードギネスチャレンジがっ！

昨日の2時からダウンロードが可能になりましたが、さすがに2時ちょい過ぎは重かったです。
今は結構サクサクですね。

Firefox3に切り替えてから入れたAdd-onsをメモメモ。

IE NetRenderer :: Firefox Add-ons
Total Validator :: Firefox Add-ons
ColorZilla :: Firefox Add-ons
JSView :: Firefox Add-ons
Html Validator :: Firefox Add-ons
Link Evaluator :: Firefox Add-ons

FirebugやGoogle SyncがまだFirefox3に対応していないようなので、ちょっと寂しいです。
あとマウスジェスチャーですね。

それにしてもこの軽快なサクサク感はFirefox2のときとは大分違います。
特にGmailがめちゃめちゃ速くなった。

開発にも向いていて軽快でふぉくすけがかわいいFirefox。
Safariもがんばって欲しいところですｗ

追記： Firebug Releases ここからFirebug1.1betaをインストールすればFirefox3でも使えるみたいです。やった～

正直これはびっくりしました！
FirefoxのAddonか〜と思いつつ手軽に入れてみましたが、とんでもないプラグインでした。

画像や動画を検索することができるのですが、ただ検索するだけじゃなくてMacらしいインターフェースで検索できちゃう。
しかもマウスパット上でスクロールができちゃうからヤヴァい。
まるでiPod TouchでCover Flowしているかのよう。

Flickrあたりで検索してみるとその凄さが分かります。
しかも軽い。

FirefoxのAddonでもこんだけのものが作れちゃうんですね。ボクも作ってみたい。

Cooliris, Inc. | Beyond the Browser

[via]
PicLens for Firefox 1.6.4 : PISCES

（※クリックで拡大）

Diggで紹介されててかなり面白いと思ったのでここでも紹介してみる。

この写真の何がすごいかというと、そのFirefoxがブロックしてくれたポップアップの数！
146912 popupって・・・

ブロックしてくれなかった場合は一体どうなっていたんだろうｗ

[via]
Digg

たつをの ChangeLogさんより。
フォクすけかわいいな～。
Firefoxヘービーユーザーだけに、デスクの脇に欲しいアイテム。

フォクすけ＊ブログ - フォクすけぬいぐるみ！

CREAMUさんのところでアツいアドオンを紹介されていました。
Firefoxのアドオンとして、HTMLをカラフルに表示してくれる「ソース表示プラグイン」です。よくこのサイトHTMLどうなってるのかな～と気になったときに右クリックから「ページのソースを表示」とやっていましたが、階層を色分けして表示してくれるこのアドオンを使い出したらこればっかりになりそうです。

視覚でHTMLを捉えられるのが本当に便利。
重宝させていただきます。

以下からダウンロード可能です。
View Source Chart :: Firefox Add-ons

[via]
CREAMU