Firefoxアドオンの開発手法開発ツール
ブラウザを再起動する場合、ブラウザツールボックスなどのブラウザに依存するツールは、それに合わせて再起動する必要があります。
ブラウザツールボックス (Browser Toolbox)
ブラウザデバッガでは、アドオンのスクリプトをデバッグできます。その実体はJavaScript デバッガですが、リモートでブラウザをデバッグするときには、ブラウザデバッガと呼称しているようです。
このツールは、既定の設定では起動できません。起動するには後述する手順で設定を変更する必要があります。
Firefox 28以降、ブラウザデバッガ (Browser Debugger) からブラウザツールボックスの名称に変更されています。
起動方法
Firefox 19以降、この機能はFirefoxに組み込まれているため、設定を変更するだけで使用できるようになります。そのためには[開発ツールのオプション]で、
- [ブラウザデバッガを有効]
- [リモートデバッガを有効]
の2つの項目をチェックします。
またはabout:configで、
- devtools.chrome.enabled
- devtools.debugger.remote-enabled
の2つの項目をtrueに設定しても同じです。
起動するにはウィンドウ左上の[Firefoxボタン]から、【Web開発 → ブラウザデバッガ ブラウザツールボックス】を選択します。またはキーボードからAlt + T、W、Eの順に押します。
リモートデバッグの受信 (Incoming Connection)
起動時に、リモートデバッグの接続要求の受け付けを検知しました。リモートクライアントはあなたのブラウザを操作できるようになります！ 接続を許可しますか？と表示されたら、[OK]をクリックします。
ここで[無効にする]を選択すると、前述のdevtools.debugger.remote-enabledの設定がfalseとなるため、設定し直して再起動する必要があります。
このダイアログは、ブラウザデバッガの背面に表示されることがあります。
リモートデバッグを許可した後、しばらくブラウザデバッガが応答しなくなることがあります。そのときは少し待ちます。ブラウザデバッガが起動したら、上部のツールバーで対象のスクリプトを選択します。スクリプトの選択が困難なときには、ファイル名から検索できます。
詳しい使用方法については、JavaScript デバッガで解説しています。
DOM Inspector
DOM Inspectorでは、ドキュメントのDOMやXULアプリケーションを調査できます。
Developer Assistant (Extension Developer's Extension)
Developer Assistantは、アドオン開発に便利なツールを提供するFirefoxアドオンです。
Developer Assistant :: Add-ons for Firefox
メニュー
同梱のツールは、メニューの【ツール → Extension Developer】から起動できます。
- Extension Builder
- Enable Debugging Preferences※1
- Javascript Shell
- Javascript Environment
- Javascript Injector
- HTML Editor
- XUL Editor
- RegExp Evaluator
- Interactive XPath Tester
- Reload all Chrome
- Reopen this window
- Restart application
※1 [Enable Debugging Preferences]をチェックすると、Firefoxが開発用に設定されます。一方でこのチェックを外すと設定がクリアされます。このチェックは予期せず外れることがあるため、ときどき確認が必要です。
Real-time XUL Editor (Live XUL Editor)
Real-time XUL Editorでは、プレビューを確認しながらXULを編集できます。これはツールのメニューをたどることで起動できますが、キーボードからAlt + T、X、Xとタイプするのが早いです。
このツール上で発生したスクリプトのエラーは、ブラウザコンソールで確認できます。しかしこのツールはXULを分析するような機能は備えていないため、プレビュー以上の本格的な開発にはDOM Inspectorの方が適しています。
XUL文書へChrome URIでアクセスできるように設定すれば、このようなツールを用いなくても、Firefoxでそれを開くことでプレビューできます。
ウィンドウ表示
[Open preview in new window]をクリックすると、プレビューを独立したウィンドウで表示できます。
このウィンドウ表示を元に戻すには、XUL Editorを再起動するしかありません。
ウィンドウ表示の状態でXULの記述を誤りXML パースエラーとなると、ブラウザごとクラッシュすることがあります。よって必要性がなければ、ウィンドウ表示とはしないようにします。
参考
Remote XUL Manager
XULファイルをFirefoxで開くことで、より詳細な動作確認を行えます。しかしFirefox 4以降ではこの機能が制限されているため、XULファイルを開こうとするとエラーとなります。
この制限は「Remote XUL Manager」により回避できます。
Remote XUL Manager :: Add-ons for Firefox
リモートXULを許可するドメインの編集は、Firefox左上の[Firefoxボタン]から、【Web開発 → リモートXULマネージャ】で行えます。
ローカルのファイルを許可対象とするには、ドメインの追加で<file>と指定します。
Add-on Builder
Add-on Builderでは、ブラウザを使用してWeb上でアドオンを開発できます。
「BrowserID Not enabled」と表示されログインに失敗するときには、Referer (リファラ) が正しく送信されているか確認します。referrer - Getting "BrowserID not enabled" trying to login to Mozilla Builder - Stack Overflow
利用例
Add-on Builderでアドオンを作成すると、まず次のようなファイルが作成されます。この一覧はそれをxpiファイルとしてダウンロードし、展開したものです。
C:.
| bootstrap.js
| harness-options.json
| install.rdf
| locales.json
|
+---defaults
| \---preferences
| prefs.js
|
+---locale
\---resources
+---addon-sdk
| +---data
| \---lib
| +---sdk
| | | base64.js
| | | panel.js
| | | private-browsing.js
| | | self.js
| | | system.js
| | | tabs.js
| | | timers.js
| | | url.js
| | | widget.js
| | | windows.js
| | |
| | +---addon
| | | runner.js
| | |
| | +---console
| | | plain-text.js
| | | traceback.js
| | |
| | +---content
| | | content-proxy.js
| | | content-worker.js
| | | content.js
| | | loader.js
| | | symbiont.js
| | | thumbnail.js
| | | worker.js
| | |
| | +---core
| | | heritage.js
| | | namespace.js
| | | promise.js
| | |
| | +---deprecated
| | | | api-utils.js
| | | | cortex.js
| | | | errors.js
| | | | events.js
| | | | light-traits.js
| | | | list.js
| | | | memory.js
| | | | observer-service.js
| | | | traits.js
| | | | window-utils.js
| | | |
| | | +---events
| | | | assembler.js
| | | |
| | | \---traits
| | | core.js
| | |
| | +---dom
| | | events.js
| | |
| | +---event
| | | core.js
| | | target.js
| | |
| | +---frame
| | | hidden-frame.js
| | | utils.js
| | |
| | +---io
| | | byte-streams.js
| | | data.js
| | | file.js
| | | text-streams.js
| | |
| | +---l10n
| | | core.js
| | | html.js
| | | loader.js
| | | locale.js
| | | prefs.js
| | |
| | +---lang
| | | functional.js
| | |
| | +---loader
| | | cuddlefish.js
| | | sandbox.js
| | |
| | +---net
| | | url.js
| | |
| | +---panel
| | | window.js
| | |
| | +---platform
| | | xpcom.js
| | |
| | +---preferences
| | | service.js
| | |
| | +---private-browsing
| | | | utils.js
| | | |
| | | \---window
| | | utils.js
| | |
| | +---system
| | | environment.js
| | | events.js
| | | globals.js
| | | runtime.js
| | | unload.js
| | | xul-app.js
| | |
| | +---tabs
| | | common.js
| | | events.js
| | | helpers.js
| | | namespace.js
| | | observer.js
| | | tab-fennec.js
| | | tab-firefox.js
| | | tab.js
| | | tabs-firefox.js
| | | tabs.js
| | | utils.js
| | | worker.js
| | |
| | +---util
| | | array.js
| | | deprecate.js
| | | list.js
| | | object.js
| | | uuid.js
| | |
| | +---window
| | | browser.js
| | | namespace.js
| | | utils.js
| | |
| | \---windows
| | dom.js
| | fennec.js
| | firefox.js
| | loader.js
| | observer.js
| | tabs-fennec.js
| | tabs-firefox.js
| |
| \---toolkit
| loader.js
|
\---test
+---data
\---lib
main.js
Add-on SDK
Add-on SDKは、アドオン開発に便利なツールやAPIの開発キットです。
Add-on SDK :: 開発者センター :: Add-ons for Firefox
Add-on Debugger
Add-on Debuggerとは、ブラウザツールボックスを特定のアドオンだけを対象に動作させるツールです。ただしこのツールが有効なのは、Add-on SDKを土台とした再起動不要なアドオンのみです。
対応したアドオンでは、拡張機能のページ (about:addons) に[デバッグ]のボタンが表示されます。
参考
参考
- アドオン開発者向けツール | Mozilla Developer Street (modest) (2012/05/25)