» アドオン開発

WebExtensionを書いてみよう

この記事はhttps://hacks.mozilla.org/2015/09/lets_write_a_webextension/の翻訳です。

ＷebExtensionを書いてみよう

By Blake Winton

Posted on September 21, 2015 in Add-ons, Featured Article, and Web APIs

あなたはMozilla’s WebExtensionsについて聞いたことがあると思います。
マルチプロセス(e10s)に対応した新しいブラウザ拡張の実装です。
たぶんあなたは「それは何？私は使えるの？」と思ったでしょう。まあ、私は助けるためにここにいます! たぶんMDN’s WebExtensions docsが開発を始めるのにとても適している場所だと思います。

WebExtensionはFirefox extensionを書く新しい方法です。

このテクノロジーはクロスブラウザ互換性の為に開発されました: 膨大な量のAPIがGoogle ChromeやOperaがサポートしているextension API と互換性を保っています。 他のブラウザの為に作られたアドオンは大抵の場合、少しの変更を加えるだけで動きます。APIもまたmultiprocess Firefoxとほぼ互換性を保っています。

一つだけ付け加えると、MozillaはChrome and OperaのサポートしているおおよそのAPIを実装している間、私たちはそれらAPIだけに制限されるわけではありません。それが理にかなっている場合、私たちは新しく機能を追加して、他のブラウザベンダーとこの機能を同様にを実装するかどうかという話をします。最後に、WebExtension APIはまだ開発途中です。Firefox Nightlyを使用する場合、最新のものを得られるため標準準拠の動作になります。よってこのチュートリアルを行うにはたぶんFirefox Nightlyを使用するのがベストでしょう。しかし覚えておいてください、これはまだ実験的な技術です  –  もしかしたら、なかったことになるかもしれません(訳注:もう正式機能になりました)。

始めてみる

よし、じゃあまずはシンプルなアドオンから始めてみようか。ボタンを追加して、クリックされたとき、私の一番好きなサイトが新しいタブで開くようにしよう。

まず最初のファイルとしてFirefoxに私たちのアドオンを伝える manifest.jsonが必要だ。

<code>{
  "manifest_version": 2,
  "name": "Cat Gifs!",
  "version": "1.0",
  "applications": {
    "gecko": {
      "id": "catgifs@mozilla.org"
    }
  },

  "browser_action": {
    "default_title": "Cat Gifs!"
  }
}</code>

よし!これで完了!たぶんあなたのアドオンはこのようになったと思います。もちろん、私たちはまだそれが動くかどうかわからない。なのでFirefoxにインストールしてみよう(最新のFirefox Nightlyを使います)。ディレクトリからFirefoxに manifest.jsonをドラッグしてみてください。しかし実際にはあなたが望んだとおりに動かなかったと思います。

The directory listing

インストール

Firefoxがあなたの拡張をアドオンとして認めるには拡張子を.xpiとしてzipファイルを与える必要があります。なので最初に7-Zipをインストールして(訳注:win7,win10以降は標準でzip圧縮できます。)、7z a catgifs.xpi manifest.jsonと入力します。(もしあなたがMacやLinuxを使っているならzipコマンドが標準で入っています。なのでzip catgifs.xpi manifest.jsonとタイピングするだけで大丈夫です)。そうしたら、 catgifs.xpiをFirefoxにドラッグします。そうするとエラーが表示されます。なぜなら私たちのアドオンはまだ署名されていないからです。

The first error

about:configに行き、xpinstall.signatures.required と検索ボックスに入力し、エントリーをダブルクリックし、falseに設定し、タブを閉じます。その後、もう一度 catgifs.xpi をFirefoxにドラッグしてみてください。新しいアドオンをインストールするかどうかの選択画面が現れるはずです!

ここで重要なことは、Firefox44(年内にリリース)で始める場合、Firefox Betaやリリースバージョンアドオンのブラウザにインストールするためには署名を要求します。なのでもしあなたが上の設定をセットした場合でも、このチュートリアルを行うためにはまだFirefox NightlyやDeveloper Editionが必要になります。

Success!!!

もちろん、私たちのアドオンはまだほとんど動きません。

I click and click, but nothing happens.

なので修正してみましょう!

機能を加える

最初に、下のコードを manifest.jsonの browser_action:という記述が含まれている行の上に記述します。

<code>  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },</code>

もちろん現在、上に出てきたbackground.js ファイルはまだ存在していませんので作成しましょう。下のjavascript をbackground.jsの中に貼り付けます。

<code>'use strict';

/*global chrome:false */

chrome.browserAction.setBadgeText({text: '(ツ)'});
chrome.browserAction.setBadgeBackgroundColor({color: '#eae'});

chrome.browserAction.onClicked.addListener(function(aTab) {
  chrome.tabs.create({'url': 'http://chilloutandwatchsomecatgifs.com/', 'active': true});
});</code>

そうするとこんな風になるはずです。 もう一度7z a catgifs.xpi manifest.json background.js (もしくは zip catgifs.xpi manifest.json background.js)とタイピングしてアドオンを再生成し, catgifs.xpiをFirefoxに再度ドロップします。そしてボタンをクリックする新しいタブが開くようになりました！

投稿者

lv7777

投稿日時

Firefox 47 アドオン互換性情報

[これは Mozilla Add-ons Blog の記事 Add-on Compatibility for Firefox 47 の翻訳です]

Firefox 47 が 6 月 7 日 [日本時間同日深夜] リリース となります。Firefox 47 の変更点でアドオンの互換性に影響を及ぼす可能性のあるものを以下にまとめました。Firefox 47 for Developers により詳しい情報が載っていますので、こちらも併せてご覧ください。

一般

タブ

XPCOM

新機能

この一覧に載っていない変更点や間違いを見つけたらコメント欄でお知らせください。もしあなたのアドオンが Firefox 47 で動かなくなった場合は、筆者の方でも調査したいと思います。

AMO に登録されているアドオンの 自動互換性テストと対応バージョンの更新 は数週間以内に行われますので、AMO に Firefox 46 対応のアドオンを登録している方は後日メールをチェックしてみてください。

Developer Edition 47：ユーザエージェントの変更、ポップアップデバッグなど

Developer Edition 47 – User agent emulation, popup debugging and more の抄訳です。

今週 Firefox Developer Edition 47 がリリースされました。この記事に関連して Devtools reload add-on や service worker tooling などのポストもあります。それぞれのトピックについては、そちらもぜひご参照下さい。この記事では、Developer Edition のその他の変更点についてまとめます。

ユーザエーエジェントの偽装

ユーザエージェントを変更できる機能が、レスポンシブデザインモードに追加されました。「Custom User Agent」にユーザエージェント名を入力するだけで、ユーザエージェントを変更できます。例えばモバイルブラウザのユーザエージェントを入力すれば、デスクトップでもスマートフォン向けサイトを見ることができます。

ユーザエージェントを変更している様子は、こちらのスクリーンキャストをご覧ください：

ユーザエージェントを変更するスクリーンキャスト

参照グラフの表示

前回のリリースで、ドミネータビューが追加されました。これはメモリを多く利用するアプリのデバッグを助けるツールでした。今回のリリースでは、これにパスパネルが追加されました。このパネルではノードがグラフとして表示され、その中の選択されたノードはガーベジコレクションの対象ではなくなります。この機能は、メモリリークのデバッグを行う際に有用です。詳細については、MDN の解説をご覧ください。

ドミンネータビューのパスパネル

コンソールでの複数行入力

コンソールでの複数行入力がよりやりやすくなりました。Enter キーを押すだけで、入力が終了しているかどうかをコンソールが自動判断します。継続入力があると判断した場合は、次の入力行が表示されます。複数行を入力するのか、1 行のみの入力なのかを機にすることなく、コマンドを入力できるようになりました。

ストレージインスペクタ

ストレージインスペクタが、キャッシュストレージをサポートしました。Service worker のデバッグ時に有用な機能です。Service Worker のデバッグに関しては Sole Penadés のブログポストをご覧ください。

またツールバーにある検索ボックスを利用して、表示するコンテンツをフィルタできるようにもなりました。フィルタしている様子は、こちらのスクリーンショットをご覧ください：
ストレージインスペクタで表示するコンテンツをフィルタしている様子

テーマの変更

ツールボックスの表示も改善しました。標準のタブを少し短くすることや、メモリツールに新しくアイコンを追加といった小さな変更に加えて、いくつかの大きな変更もあります。ライトテーマの一新がその代表例です。より見やすく、洗練されたルック & フィールとなりました。

新しいライトテーマを利用した例は次のスクリーンショットをご覧ください：

新しいライトテーマを利用している例

またデバッガの表示も更新しました。条件付きのブレークポイントは、スクリーンショットのようにオレンジ色で表示されるようになりました：

条件付きブレークポイントのハイライト表示例

ネットワークモニタのツールバーの位置も、画面上部に変更されました。これでよりアクセスしやくなり、他のツールとのデザイン上の一貫性も保たれるようになりました。

ネットワークモニタ。ツールバーが上部に移動している。

アドオン向け：ポップアップのデバッグ

WebExtensions のリリースに向けて、アドオンのデバッグを簡単にする機能を追加されつつあります。今回のリリースでは、ポップアップの調査を簡単に行うための機能が追加されました。この機能を利用すると、クリックしてもポップアップが消えないようにロックできるようになります。ブラウザツールボックスを起動し、右上にある 4 つの四角を持つアイコンをクリックすることで、ポップアップをロックできます。詳しくはこちらの記事をご覧ください。

また実際の利用例をこちらのスクリーンキャストでご覧いただけます：
Firefox 47: debugging popups in WebExtensions

その他の変更点

上記の変更点に加えて、ツールボックスに全般にわたって改善が行われています。特筆するべきものは、以下の 2 つです：

また、Firefox のマルチプロセス化の関係で、3D ビューが削除されました。この機能を利用されたい場合は、こちらのアドオンをご利用ください。

フォントインスペクタも、標準では無効化されるようになりました。将来的には再度有効化される予定ですが、現在のリリースで有効化するには、about:config で devtools.fontinspector.enabled の値を変更する必要があります。

Developer Edition のリリースに貢献いただいたみなさま、ありがとうございました！最新版をこちらからインストールして、フィードバックをお願いします。

Tim Nguyen について

Firefox の開発ツールのコントリビュータ。Web 開発と Web デザインに情熱を持つ。

Twitter アカウント

Tim Nguyen による他の記事

投稿者

chiko

投稿日時

Firefox 46 アドオン互換性情報

[これは Mozilla Add-ons Blog の記事 Add-on Compatibility for Firefox 46 の翻訳です]

Firefox 46 が 4 月 19 日 [日本時間同日深夜] リリース となります。Firefox 46 の変更点でアドオンの互換性に影響を及ぼす可能性のあるものを以下にまとめました。Firefox 46 for Developers により詳しい情報が載っていますので、こちらも併せてご覧ください。

一般

署名

新機能

この一覧に載っていない変更点や間違いを見つけたらコメント欄でお知らせください。もしあなたのアドオンが Firefox 46 で動かなくなった場合は、筆者の方でも調査したいと思います。

AMO に登録されているアドオンの 自動互換性テストと対応バージョンの更新 は数週間以内に行われますので (Firefox 45 向けの更新もまだ保留となっています)、AMO に Firefox 45 対応のアドオンを登録している方は後日メールをチェックしてみてください。

Firefox 45 アドオン互換性情報

[これは Mozilla Add-ons Blog の記事 Add-on Compatibility for Firefox 45 の翻訳です]

Firefox 45 が 3 月 8 日 [日本時間同日深夜] リリース となります。Firefox 45 の変更点でアドオンの互換性に影響を及ぼす可能性のあるものを以下にまとめました。Firefox 45 for Developers により詳しい情報が載っていますので、こちらも併せてご覧ください。

一般

UI

XPCOM

署名

新機能

  • 簡易 JSON アドオン更新プロトコルに対応しました。Firefox は、独自に自動更新を管理しているアドオンのために、既存 XML 形式の代わりとなる JSON 更新ファイル に対応しました。新しいアドオンについては JSON 形式の使用を推奨します。既存のアドオンについては、大半のユーザが 45 以降にアップグレードするまで切り替えるべきではありません。

この一覧に載っていない変更点や間違いを見つけたらコメント欄でお知らせください。もしあなたのアドオンが Firefox 45 で動かなくなった場合は、筆者の方でも調査したいと思います。

AMO に登録されているアドオンの 自動互換性テストと対応バージョンの更新 は数週間以内に行われますので、AMO に Firefox 44 対応のアドオンを登録している方は後日メールをチェックしてみてください。

アドオンの署名に関する最新情報

Firefox 43 から、アドオンのデジタル署名が初期設定で強制されるようになりました。この要件は、当初 Firefox 44 のベータ版とリリース版で削除される予定だった 設定を切り替える方法 で無効化することもできます (Firefox Nightly、Developer Edition および ESR では、この設定は当面存続します)。

いくつかの理由から、この設定の削除は Firefox 46 へ延期されました。まず、未署名の再起動不要アドオンを一時的に読み込む ことを可能にする機能を Firefox 45 へ追加する作業を進めており、これによって、そうしたアドオンの開発者はリリース版の Firefox を使って動作確認を行えるようになります。このオプションは設定を廃止する前に提供したいと考えています。また、開発者が署名済みアドオンへの移行を完了するまで十分な時間を確保したいと思っています。

署名に関する wiki ページを更新して 最新のスケジュール を記載しました。Firefox のバージョン別公開日 はリリース関連のページに載っています。Firefox 46 およびそれ以降のベータ版とリリース版では署名が必須となり、その時点でベータ版とリリース版を元にしたノンブランド版 Firefox もテスト用に提供します。

Firefox 44 アドオン互換性情報

[これは Mozilla Add-ons Blog の記事 Add-on Compatibility for Firefox 44 の翻訳です]

Firefox 44 が 1 月 26 日 [日本時間同日深夜] リリース となります。Firefox 44 の変更点でアドオンの互換性に影響を及ぼす可能性のあるものを以下にまとめました。Firefox 44 for Developers により詳しい情報が載っていますので、こちらも併せてご覧ください。

一般

JavaScript

テーマ

署名

  • 現行版の Firefox 43 で アドオンの署名 が必須となりましたが、一方でこの強制を上書きして無効化する設定項目も用意されています。Firefox 44 でこの設定も完全に削除されるため、Firefox の Release チャンネルでアドオンを動かすには必ず署名を付ける必要があります。取り得る選択肢については こちらの記事 を参照してください。

この一覧に載っていない変更点や間違いを見つけたらコメント欄でお知らせください。もしあなたのアドオンが Firefox 44 で動かなくなった場合は、筆者の方でも調査したいと思います。

AMO に登録されているアドオンの 自動互換性テストと対応バージョンの更新 は数週間以内に行われますので、AMO に Firefox 43 対応のアドオンを登録している方は後日メールをチェックしてみてください。

Firefox 43 アドオン互換性情報

[これは Mozilla Add-ons Blog の記事 Add-on Compatibility for Firefox 43 の翻訳です]

Firefox 43 が 12 月 15 日 [日本時間同日深夜] リリース となります。Firefox 43 の変更点でアドオンの互換性に影響を及ぼす可能性のあるものを以下にまとめました。Firefox 43 for Developers により詳しい情報が載っていますので、こちらも併せてご覧ください。

一般

XPCOM

署名

  • これは Firefox で 署名が必須となる 初めてのバージョンとなります。未署名のアドオンはインストールできず、初期設定で無効化されます。署名の強制を無効化する設定 (about:config 内の xpinstall.signatures.required) はありますが、今のところの予定では Firefox 44 でこの設定は廃止されます。

この一覧に載っていない変更点や間違いを見つけたらコメント欄でお知らせください。もしあなたのアドオンが Firefox 43 で動かなくなった場合は、筆者の方でも調査したいと思います。

AMO に登録されているアドオンの 自動互換性テストと対応バージョンの更新 は数週間以内に行われますので、AMO に Firefox 42 対応のアドオンを登録している方は後日メールをチェックしてみてください。

Firefox 42 アドオン互換性情報

[これは Mozilla Add-ons Blog の記事 Add-on Compatibility for Firefox 42 の翻訳です]

Firefox 42 が 11 月 3 日 [日本時間同日深夜] リリース となります。Firefox 42 の変更点でアドオンの互換性に影響を及ぼす可能性のあるものを以下にまとめました。Firefox 42 for Developers により詳しい情報が載っていますので、こちらも併せてご覧ください。

一般

XPCOM

新機能

この一覧に載っていない変更点や間違いを見つけたらコメント欄でお知らせください。もしあなたのアドオンが Firefox 42 で動かなくなった場合は、筆者の方でも調査したいと思います。

AMO に登録されているアドオンの 自動互換性テストと対応バージョンの更新 は数週間以内に行われますので、AMO に Firefox 41 対応のアドオンを登録している方は後日メールをチェックしてみてください。

アドオン署名の締め切りを延長します

[これは Mozilla Add-ons Blog の記事 Extending the deadline for add-on signing の翻訳です]

皆さんからのフィードバックを受けて、先週 Bug 1203584 が登録され、Firefox 41 と 42 のアドオン署名要件が無効化されました。これにより、署名の強制は 2015 年 12 月 15 日頃リリース予定の Firefox 43 へ延期されます。

新規 AMO 非掲載アドオンの審査待ちは (Andreas Wagner、別名 TheOne のたゆまない努力のおかげで) 短期間に保たれていますが、Firefox 42 がベータ版になる 9 月 22 日の締め切りまでに必要な変更を実装する十分な時間がないという声が多くの開発者から聞かれています。皆さんに一息つく時間をもたらすとともに、Mozilla 側でこの時間を利用してアドオン登録手順に多少の改善を加え、どのような審査が必要とされるのかをより明確にします。この作業は Bug 1186369 で行なわれています。

この新たなプロセスの展開にあたって皆さんの辛抱に感謝します。既にアドオンの署名を済ませた開発者には、素早い対応をしてもらっていることから、特に感謝の意を表したいと思います。