投稿日:2015年7月24日4000機能拡張の構成に必要なファイルを確認しながら、ツールバーボタンを実装します「Firefox機能拡張の解説」第2弾。このページでは機能拡張を構成するファイルを把握し、実際に動作する機能拡張を作成します。合わせて機能拡張の動作テストをする方法や、デバックの方法も解説します。watchpostで機能拡張を実行するパッケージマニフェストについて前回作成した機能拡張のディレクトリにある「package.json」というファイルです。このファイルだけでも機能拡張として動作します。パッケージマニフェストには機能拡張に関するタイトルや作者情報などのメタ情報を記載します。initコマンド」で何も入力しないで追加される項目は以下の通り。"MIT"}package_jsonの公式ページ公式ページに注釈がありますが、JPMになってから多くの項目が統廃合されています。古い解説ページを参考にしている場合は注意してください。アドオンスクリプトについてJPMで作成したサンプルでは「index.js」というファイルが作成されます。このファイルがエントリーポイントになります。エントリーポイントとは最初に実行されるファイルです。script(アドオンスクリプト)と名付けているようです。以前のcfxコマンドではデフォルトでlibフォルダに作成されるmain.jsというファイルがアドオンスクリプトでした。2015年現在、アドオンスクリプトの解説にはmain.jsというファイル名が使われていることが多いので注意してください。アドオンスクリプトの名前やフォルダは変更することができます。hoge.jsというファイルをアドオンスクリプトにする場合はパッケージマニフェストに以下のように記述します。"hoge.js"README.mdについて拡張子から分かる通りマークダウン記法のリードミーファイル。githubなどでよく使われていますね。これはオプションで無くても構いません。余談ですがREADMEが大文字なのはASCII文字コード順で先頭に来るようにするためらしいです。initで機能拡張を作成するとtestフォルダにtest-index.jsというファイルが作成されます。内容については触れませんが、このようにディレクトリを作成して読み込むことができるので、構造が複雑になる場合はimageディレクトリやlibディレクトリを作って分類すると必要なファイルが探しやすいと思います。cfxコマンドの時代にはdataフォルダの中にimageやlibといったフォルダを作成して管理するのが一般的でした。機能拡張のチュートリアルについて日本語版のチュートリアルや解説もあるのですが、Firefoxの革新性ゆえか情報の陳腐化が激しく、まともに動作する解説がありません。そのため不慣れでも英語版のチュートリアルを進めるのをお勧めします。英語版の公式チュートリアル書いてある通りに進めても動作しない日本語版の公式チュートリアルcfxコマンド時代のものですがFirefoxの機能拡張についてまとめた神スライド上記3点を見比べながら進めれば問題なく作成できると思います。それだけでは手抜きなので、JPMを利用して英語版のチュートリアルにある機能拡張を作成してみます。ツールバーボタンを追加するツールバーボタンを追加する機能拡張を作成します。Add-onを作成します。←YESを表すyを入力してエンターこれでCドライブ直下にToolbar-Addonという機能拡張が作成されました。アイコン用の画像を用意するツールバーには3つのサイズの画像を指定します。チュートリアルに習って以下のファイル名でテスト用の画像を作ります。Chromeの解説の時と同じようにtestのTというアイコンを作成しました。用意するのが面倒だという方は以下の画像を使ってください。メニューパネル用(どこかは不明)C:\Toolbar-Addon\に保存しておいてください。アドオンスクリプトを編集するエントリーファイルであるアドオンスクリプト「index.js」を編集します。手抜きですが、チュートリアルの記述をそのまま拝借します。{tabs.open("https://www.mozilla.org/");}1~2行目、requireでモジュールを読み込みます。この例ではボタンアクションに関するAPIであるui/button/actionモジュールと、タブに関するAPIであるsdk/tabsモジュールを読み込んでいます。して読み込まれるモジュールをSDKモジュールと呼びます。Chromeだとマニフェストファイルに使用するAPIを指定していましたが、Firefoxはアドオンスクリプトに直接書くタイプです。実際に読み込まれるモジュールはFirefoxで以下のURLを入力すると表示できます。resource://gre/modules/commonjs/sdk/ui/button/action.jsresource://gre/modules/commonjs/sdk/tabs.jsバージョンの違いによるrequireの違い古いバージョンだと「sdk/」の部分がいらず、require("tabs")で動作していましたが、今では警告が出ます。過去にはモジュールの呼び出しにconstを利用して定数に代入していました。現在ではvarで定義して、require("sdk/tabs")といった記述になったので、古い解説を参考にする際には注意してください。