QuaBEx

らくだ

QuaBEx は、 Opera, Google Chrome, Safari, Firefox に対応したブラウザ拡張フレームワークです。 QuaBEx を利用すると、ブラウザ間の API 差異を気にすることなく、比較的容易に4つのブラウザで動作する拡張(エクステンション)を作成出来ます。

動作環境

  • Opera 11.60+ エクステンション
  • Google Chrome 17+ 拡張機能
  • Safari 5.1+ 機能拡張ビルダー
  • Firefox 10+ Jetpack SDK

各ブラウザ毎の開発環境等に関する事は言及しませんので個別にお調べください。

インストール

ダウンロードした zip ファイルを適当な所に展開してください。ファイルには "Hellow World!" アラートを表示する例示ファイルが含まれています。まずはこれを各ブラウザで動かしてみましょう。

Opera

"展開フォルダ/QuaBEx.safariextension/data/config.xml" を、 Opera に D&D してください。

Google Chrome

「パッケージ化されていない拡張機能を読み込む」で "展開フォルダ/QuaBEx.safariextension" を選択してください。

Safari

「機能拡張を追加」で "展開フォルダ/QuaBEx.safariextension" を選択してください。

Firefox

Jetpack SDK の cfx run を "展開フォルダ/QuaBEx.safariextension" で実行してください。

ファイル構成

QuaBEx には以下のファイルが含まれています。

manifest.json(*)
Google Chrome 拡張機能用定義ファイル。
Info.plist(*)
Safari 機能拡張用定義ファイル。
package.json(*)
Firefox Jetpack 用定義ファイル。
icon-n.png(***)
Chrome, Safari 用アイコンファイル。
/lib
Firefox 用実行ファイル格納フォルダ。
main.js(*)
Firefox 用実行ファイル。
WHO.extension.js
Firefox 用ライブラリ。
WHO.background.js
Firefox 用 UI 生成ライブラリ。
/data
Opera ではルート。
config.xml(*)
Opera 用エクステンション定義ファイル。
index.html(*)
Opera, Chrome, Safari 用バックグラウンドページ。
options.html(**)
設定ページ。
popup.html(**)
ポップアップページ。
favicon.ico(***)
アイコンファイル。
/includes
コンテンツ用スクリプトフォルダ。
0.extension.js
コンテンツ用ラッパーライブラリ。
test.js(**)
テスト用コンテンツスクリプト。
WHO.focused.js(**)
フォーカスページ取得スクリプト。
/lib
ライブラリフォルダ。
WHO.extension.js
Opera, Chrome, Safari 用ライブラリ。
WHO.background.js
Opera, Chrome, Safari 用 UI 生成ライブラリ。
WHO.widget.js
options.html, popup.html 用ライブラリ。
/scripts
スクリプトフォルダ
background.js(**)
バックグラウンドスクリプト。
startup.js(**)
Opera, Chrome, Safari 用スタートアップスクリプト。
options.js(**)
設定ページ用スクリプト。
popup.js(**)
ポップアップページ用スクリプト。
/styles(***)
options.html, popup.html 用スタイルシート。
/icons(***)
アイコン画像フォルダ。
icon-n.png(***)
Opera 用アイコンファイル。
/locales(***)
多言語化ファイルフォルダ。
/preferences(***)
その他設定ファイルフォルダ。
/_locales(***)
Chrome 用多言語化ファイルフォルダ。

注釈

無印
必須。このフレームワークのコアです。
*
必須。定義ファイルなど。必要に応じて変更してください。
**
例示ファイル、フォルダです。適宜追加、変更、削除してください。
***
機能には影響しないデータ、設定ファイル。適宜追加、変更、削除してください。

エクステンションの作成

では、実際にエクステンションを作成してみましょう。

まずは、 QuaBEx を適当な場所に展開し、フォルダ名を ExtensionName.safariextension に改名してください。フォルダ名の後ろに .safariextension をつけなければならないのは、こうしないと Safari が認識してくれないためです。

定義ファイルの設定

QuaBEx では、ブラウザ間の API 差異を気にせずにコーディングできますが、定義ファイルは各ブラウザ毎の設定が必要です。

Opera

Opera の定義ファイルの設定はとても簡単です。 config.xml の name や description 要素などを適宜変更してください。コンテンツスクリプトなどを追加した場合も、自動的に認識してくれるので追加の必要がありません。ただし、実行順などを定義できませんので、コンテンツスクリプトの作成は常に Opera での実行順を気にする必要があります。

Google Chrome

manifest.json の name や description を適宜変更してください。多言語化する場合は、 /_locales フォルダを利用します。また、コンテンツスクリプトを追加した場合は、適宜 content_scripts の項に追加してください。

Safari

機能拡張ビルダーで ExtensionName.safariextension フォルダを読み込んで、適宜表示名などを変更してください。コンテンツスクリプトを追加した場合は、「取り込んだ機能拡張の内容」(訳が変だよね)に適宜追加してください。

Firefox

package.json の name や description を適宜変更してください。コンテンツスクリプトを追加した場合は、 /lib/main.js の == UserScript == というコメントをつけられた部分に以下のように追加してください。


// ==UserScript==
DATA.url("includes/コンテンツスクリプトのファイル名.js"),
// ==/UserScript==

また、バックグラウンドプロセスにライブラリやスクリプトを追加する場合は、適宜 main.js を修正する必要があります。

コンテンツスクリプト

コンテンツスクリプトは /includes フォルダに配置し、前項に従って適宜定義ファイルを修正してください。コンテンツスクリプトの読み込みタイミングはブラウザによって異なりますので、どの様なタイミングでも動作するようにコーディングしてください。ページの window への参照は _window 、 document への参照は _document でラップされています。特に Firefox で動作させる場合には注意が必要です。 _window へのオーバーライトは、 Chrome, Safari ではエクステンション内のコンテキストで有効で、 Opera, Firefox ではページのオブジェクトへのオーバーライトとなります。 window へのオーバーライトは、 Opera ではページのオブジェクトへ、それ以外ではエクステンション内のコンテキストとなります。

バックグラウンドページ

バックグラウンドページのプロセスは、基本的には同梱されている background.js を書き換えるだけです。 Firefox と互換性を保つには、 DOM オブジェクトを利用しないでください。 window.onload 等は、 Firefox では読み込まれない startup.js 内に集約してください。 XMLHttpRequest,setTimeout 等を利用する場合は、 main.js 内でモジュールをロードする必要がある場合があります。

設定ページ

現在、設定ページは options.html に固定されています。ポップアップページ内に options.html へのリンクを設置すると、設定ページが開きます。 Firefox との互換性を保つには、 options.html 内にスクリプトを直接書かないでください。必ず src 属性で js ファイルをロードしてください。

ポップアップページ

ポップアップページのファイル名は変更可能ですが、 Chrome と Safari では定義ファイルで、 Opera と Firefox では WHO.background の引数で変更します。設定ページ同様、 html 内に直接スクリプトを書かないでください。

多言語化

設定ページとポップアップページで preferenses/lang.js と lig/WHO.widget.js をロードすると、 html の多言語化に対応します。 Opera の多言語化規則に則って lang.js を /locales フォルダに設置してください。

API

利用できる API に付いては QuaBEx API 一覧をご覧ください。

ビルド

Opera については /data 以下のファイルを zip してください。

ライセンス

現在、ライセンスについては保留しています。とりあえず、ローカルでのテストにご利用ください。是非、これを使ったエクステンションを公開したいという方は個別にお申し出ください。

しかるべきライセンスを設定したいと思っていますが、ライセンスに関する知識に疎いために決めかねています。以下の条件に当てはまるようなライセンス設定にしたいと思っていますが、適切なライセンスをご存じの方はご教示ください。

  • 非商用に限り改変・再配布可能とする。
  • 内包されている、定義ファイル類、例示ファイル類については改変自由、ライセンスの適用範囲外とする。
  • ライブラリについては、再配布、改変後も同様のライセンスを継承する。
  • 再配布、改変後も原著作権者表記は必要。
  • QuaBEx を利用したエクステンションのライセンスは制限しない。ただし、内包するライブラリのライセンスは継承されるので、商用は制限される。
  • 免責

更新履歴

2012-02-18
QuaBEx
トラックバックURL https://far.whochan.com/trackback.cgi/diary/3166
Usertime : 0.11 / Systemtime : 0.02