エクステンション開発の注意点

Opera Extension は W3C Widget に準拠しています。

Dev.Opera のほうに日本語のドキュメントもけっこう充実しています。

ここでは、上記のページにあまり書いてない、はまりやすい点について書いていきます。

[編集] フォルダー構造

エクステンションは、拡張子を .oex にした単なる zip ファイルです。

必須ファイルは config.xml と index.xml です。その他、includes フォルダーと locales フォルダーが特別な意味を持つフォルダーです。options.html はエクステンションの設定ページになります。あとは何を置いてもかまいません。

zip を作るときは、これらのファイルが zip のトップレベルに来るように作らないといけません。

例えば Windows のエクスプローラーや Mac の Finder で zip を作るなら、config.xml のあるフォルダに入り、これらを全部選択した状態で、右クリックから圧縮を選ぶ必要があります。

config.xml を含むフォルダーを選択して圧縮、としてはいけません。

[編集] config.xml

config.xml の書き方と注意点について。詳しくはこちら（英語）とこちら（英語）

まず最初に、冗長な（これだけ書けばほぼ全ての用に足りるであろう）例を載せます。

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        id="http://example.com/example-extension"
        version="1.0.0">
 
  <name>Example Extension</name>
 
  <description xml:lang="en">This extension is a great extension</description>
  <description xml:lang="ja">この拡張はとてもグレートな拡張です</description>
 
  <license xml:lang="en" href="http://www.opensource.org/licenses/mit-license.php">The MIT License</license>
  <license xml:lang="ja" href="http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license">MIT ライセンス</license>
 
  <author href="http://name.example.com/jon_von_tetzchner/">Jon von Tetzchner</author>
 
  <icon width="64" height="64" src="icons/icon64.png" />
  <icon width="18" height="18" src="icons/icon18.png" />
 
  <access origin="https://example.com" subdomains="true" />
 
  <preference name="apiKey"
	      value="abcd123456"
	      readonly="true"/>
 
  <update-description href="http://example.com/example-extension/update.xml"/>
 
</widget>

それぞれについての注意点は以下の通りです。

[編集] widget 要素

XML 名前空間は "http://www.w3.org/ns/widgets" でなければいけません。

id は何でもいいですが、他の人が作ったエクステンションと被らないのが望ましいです。http:// のような id をつけると、Opera のエクステンション管理画面で拡張のタイトルがその URL へのリンクになるようです。

version を指定すると Opera のエクステンション管理画面で拡張のタイトルの下にバージョン番号が表示されます。

[編集] name, description, license 要素

name と description はエクステンションのインストール時と、エクステンション管理画面で表示されます。

xml:lang をつけて複数指定してもいいです。その場合は、Opera の UI 言語設定によってどれが表示されるか決まります。

[編集] author 要素

エクステンション管理画面で表示されます。そのときに href 属性の URL へリンクされます。

[編集] icon 要素

Opera のエクステンションギャラリーに登録する場合は縦横 64 px のアイコンが必須です。（以前は 18 px のほうも必須だったけど無くなった？）

[編集] access 要素

エクステンションのバックグラウンドページから XMLHttpRequest することのできるドメイン（とプロトコル）を指定します。

すべてのドメインへ XMLHttpRequest を出す可能性のあるエクステンションは origin="*" とします。

subdomains="true" をつけるとサブドメインまで許可します。

[編集] preference 要素

エクステンションの設定項目を書けます。詳しくはこちら（英語）

たとえば上記の場合は、バックグラウンドページやオプションページ内から widget.preferences.apiKey で読み取ることができます。

使い方は localStorage と同じです。

localStorage との違いは、readonly にすることができる点と、初期値を指定できることです。

[編集] update-description 要素

Opera のエクステンションギャラリーに登録する場合はこの要素は必要ありません。

自動アップデートのための XML ファイルの URL を書きます。

XML ファイルはこのような書式です。

<update-info xmlns="http://www.w3.org/ns/widgets"
             src="http://example.com/example-extension.oex"
             version="1.1">
</update-info>

また、エクステンションは MIME タイプ application/x-opera-extension でないといけません。詳しくはこちら（英語）

[編集] index.html

バックグラウンドページです。

title 要素があると Dragonfly から見たときにわかりやすくなります。

バックグラウンドで動かすスクリプトがあるときは script 要素を持ちます。

config.xml で content 要素として指定することもできます。

[編集] includes フォルダー

ユーザー JavaScript ファイルを入れます。詳しくはこちら。

UserJS のスペシャルコメントである @include と @exclude はそのまま使えます。

注意点は、ここで実行される JavaScript はページ側のコンテクストとは別のコンテクストで走るということです。(つまりグローバルオブジェクトが window ではない)

window と document オブジェクトはそれぞれページ側のものを参照していますが、それ以外の DOM オブジェクトなどは window.location などのように指定する必要があります。

バックグラウンドページと通信するには opera.extension.onmessage と opera.extension.postMessage が使えます。

[編集] locales フォルダー

このようなフォルダー構造にすると、

|-+ config.xml
|-+ index.html
|-+ includes
| `-+ user.js
`-+ locales
  |-+ ja
  | `-+ includes
  |   `-+ user.js
  `-+ en
    `-+ includes
      `-+ user.js

言語によって別の user.js が使われます。どの言語が使われるかは、Opera の言語設定によって決まります。Opera 起動中に言語設定を変えると、再起動後に反映されます。

また、エクステンションの中で（例えばポップアップやオプションページで）エクステンションの内部のファイルを指定したとき、まず locales フォルダーの中のファイルを探し、見つからなければトップレベルのフォルダーの中を探します。

[編集] options.html

このファイルが存在する場合は、Opera のエクステンション管理画面から（アンインストールボタンの右側の歯車マークから）設定ページとして開くことができます。

Google Chrome Extension のようにバックグラウンドページのグローバルオブジェクト直接触ることはできません。postMessage を使う必要があります。

Opera 11.10 から opera.extension.bgProcess としてバックグラウンドページの window オブジェクトが使えるようになり、Chrome のエクステンションを移植しやすくなりました。