【WebExtension】作成時に知っておきたい 構成概要【FireFox】


FIreFoxのアドオンを作るとき知っておきたい大枠をメモとして残しておきます。

昔開発した時、 Chromeの余りの文章の分かりにくさに、意味が分かりかねてたけれども、 今回MDNなど紹介サイトが増え、ドキュメントも整理されてきて、勘所となる概要が理解できたので 書いて見ます。

これがわかれば大きく道に迷うことはないと思います。

アドオンとは

拡張機能は、 主にユーザ側として、あると便利だけど、すべてのサイト管理者と連絡するのは面倒な機能や また、せっかく JavaScript(ECMAScript) があるのにもったいないという要求や、ブラウザであとこれをもうチョットすれば使いやすいのにという要求をかなえるためのものです。

そのため、ブラウザというアプリケーションとの連携や、JavaScriptの拡張機能が求められます。

拡張機能の第一歩

HTMLを書き換える用途には、JavaScriptが簡単でいいですが、セキュリティ上問題が発生しやすいです。

そこで、 chromeは  分離して制限をかけたり、パーミッション方式を導入しました。

実行環境を分けるのは大事だと思いますが、 Androidでも同様で、正式に回避できるので、面倒で遅くなる割にあんまり意味はないと思います。

常時起動できる、ブラウザと連携できるモジュール

その 各WEBページと密につながる JSの部分を  Content Scriptと言います(以下CSと略)。

CSでHTMLを まるでサイト管理者のように入れられますし、サイトが変わっても使用するユーザの好みに合わせて、HTMLや見た目をいじることができます。

ただし、WEBとほぼ同じなので、セキュリティ上ローカル(デスクトップ上のファイルなど)やブラウザとアクセスができません。

そこで裏で連携する機能が  Background です(以下BGと略す)。

CSはBGと連携することで、ブラウザやローカルリソースに限定的にアクセスし、

またBGから見れば、WEBコンテンツをCS経由で実質操作できるようになります。

WEBページ寄り →  CS ブラウザ寄り → BG という関係になります。

その他の便利なサブモジュール

また安全面や効率面からも環境を分離して、全タブで共通のプログラムがあると開発効率がとてもいいです。

その他にWindowsアプリケーションのようにあると便利なものがありますね。

ツールバー、オプション画面、バッジやポップアップ、サイドパネル、右クリックのコンテキストメニューなどです。

それぞれ  BrowserAction , Option,  BrowserAction,  SidePanel(以下SP)、コンテキストメニューなどです。

これらは BGに近く バックグランドとアクセスできますので、CSとの連携もBG経由で行います。

開発内容

実際は、CSは想像できるように  JSを まるで、各ページに埋め込まれたように開発します。

役割 開発言語や開発する媒体
Webの変更 CS JS
常時起動スクリプト BG JS
ツールバーのアクション コンテキストメニューのアクション 各モジュール(SP、オプション)との連携 BG JS
ローカルリソースとの連携 BG
JS
拡張機能からたどれる オプション画面 ツールバーのポップアップ オプション ツールバーポップアップ サイドパネル HTML/CSS/JS ふつうのWeb ページのように開発でき、 ローカルリソースやBGとも連携できます。

サイドパネルなども htmlで開発できるのは、驚きです。確かに効率は良いと思いますね。

開発に必要なもの

必要なリソース

以上を踏まえると、 特に必要なものは、何をしたいかによります。 その拡張機能の目次となるものが manifest.jsonです。

manifest.jsonには

名前、バージョン、作者、(の他 HP,icon)なども設定できます。 また、ツールバーを使う場合、  browser_actionを設定し オプション画面を使う場合、 option セクションを設定し、 パーミッション(tab操作や遷移、データの保存、広い範囲のURLアクセスなど)については permissionsセクションを追加します。

 拡張機能情報 description,name,version (icons など)
使用モジュール バックグランド: background   jsを複数指定可能
サイドパネル: sidebar_action HTML上から複数のJS指定可能
オプション  : option? HTML上から複数のJS指定可能
Webインジェクション:  content_script 複数のJS指定可能、対象URLを指定(全URLも指定可能)
使用権限 permissions
使用リソース resouce

初めての拡張機能 - Mozilla | MDN

これを読めばそれの勘所がわかります。manifest.jsonのページを参考にしてください。manifestもいったんほぼそのまま使って、必要に応じて増やしたり、公開前に整理していけばいいと思います。

コンテキストメニューの場合 menuを テーマの開発は Theme を   履歴関連は  History 、検索は findなどがありますが 大したことはできないです。ほぼ js でできるようなことをやるイメージでいたほうがいいです。

clipboard も 履歴も、拡張機能も、メニューも  大した情報も取れなければ、ちょっとしかAPIはありません。 chromeの拡張機能によさげなものがないのもわかる気がしますね。。。

発表までのフロー

  1. フォルダを掘る
  2. manifest.jsonを作る
  3. 対象の js やHTMLを作る
  4. デバッグ画面をFirefoxで起動する。  about:debugging  (Edgeの場合   about: で flags を修正しないとデバッグ用に拡張機能を読み込めないようです。フラグをオンにすれば、オプション拡張機能のサイドパネルっぽいところに読み込みボタンが出現するようになります)
  5. 一時的なアドオンのデバッグを許可して、拡張機能のフォルダのいずれかファイルを読み込む。
  6. デバッグモードで 拡張機能が読み込まれる。
  7. 好きなページでテストする。
  8. https://addons.mozilla.org/ja/developers/ でユーザ登録する。
  9. フォルダの中をフォルダを含めずに圧縮して、デベロッパーコンソールから拡張機能を登録(アイコン、説明、ライセンス、カテゴリ、もちろん拡張機能の zip圧縮版)。
  10. レビューを受け、晴れて正式に並びます。

Firefox は 64サイズのアイコンが、 chromeは 128xのアイコンがあったほうがいいかもしれません。 Edge , Operaもちょくちょく操作が違いますが、大体同じような流れで開発できます。

これらのフローややり方は、 MDNのサイトに、ちゃんと近い内容がかかれていますので、別に今覚えなくても大丈夫です。

レビューも、深読みせずに注意点をちゃんと確認して、わかりましたと回答するぐらいのもので、1回目でさえ、すぐ終わります。

開発のフロー例

  1. とりあえず、CSか BGを作り読み込ませながら、いじる。 HTMLやJSを開発した人なら問題ない。  特殊なAPIはアドオン - Mozilla | MDN の JavaScript APIを眺めてみてください。
  2. 動かせそうな予感がしたら、作る。
  3. できたら、UIも整備
  4. 見た目も整備 (HTML・CSS)
  5. オプション画面や 情報の設定を行う。   storage オブジェクト
  6. i18n化する。     HTML本文等の i18n化はできず、自分で置き換えないといけません。ただ文字列を引っ張ってくるところや、 manifest.json上での書き換えは自動で用意されています。 __MSG_extensionString___ みたいに書いておくと  extensionString の名前で作っておいた ja/enリソースファイルを引っ張ってこれます。js上ではbrowser.i18n.getMessage(str);です。

    ※i18nは面倒だし、不足しているしやらないね。。

まずは CSでページのHTML要素を追加したり変えるところから入るのがいいかも。MDNのStart Tutorialもそんな感じですし。

開発時のポイント

通信

通信は

CS  ← →  BG  ← →   Option/ SidePanel/ ツールバー Popup と連携します。

右側の Optionなどからは 以下のコードで 非同期通信を端折れますし、メッセージハンドリングをしてもいいです。 let backgroundPage = browser.extension.getBackgroundPage(); 左側のCS との通信では、 タブブラウザなのでCSは 複数あることに注意してください。

それぞれの通信連携は 以下の真ん中あたりにあるサンプルを見ればできちゃいます。

コンテンツスクリプト - Mozilla | MDN

BGでメッセージハンドラを起動していると、サイドパネルが閉じたときやタブが消えた時など 通信エラーが出てうざいです。消すとなるとまた結合のデバッグしずらいので微妙なところです。

基本は BG 、CS間など通信がばんばんありますから。

ストレージ

localストレージが使えて便利ですが、サンプルプログラムが意外とわかりづらい。相当の時間を費やしてしまいました。初期値とかあるので微妙にモジュール化も難しいですね。

デバグ

コンソールの出力場所

CSは ふつうのWeb ページなので、ページの要素検証などからコンソールやデバッグ画面が開けます。 Chromeの場合は、開発ツールから(いわゆるブラウザのオプションあたりにあるやつ)

BGや オプション側は、about:debugging のページに、デバッグボタンが拡張機能ごとにでるので、 そのボタンを押して コンソール画面を開きます。 BGは 一つですが、CSはページごとになるので注意。当たり前だけど。 Chromeの場合、アドオンページから起動できますが、オプションやポップアップは、ページの要素検証から立ち上げる形になります。

オプションの設定画面は普通に、about:addons から開いてできます。

プリントデバッグの小技

例によって プリントデバッグ console.log() を多用しますよ。。。 alert()は BGだと使えませんが、ほかでは調べ切れてませんが、できるようです。

JSONデータ形式が、通信やメッセージングにおいて楽なので JSON.stringfy(data) やその逆 JSON.parse()がおすすめです。 プリントデバッグがはかどるでしょう。

もちろんコンソールの横からもデバッグできます。

配列、ループ

JSONの結合は、Object.Assign(json1, json2);とすると json1に上書いてくれます。 配列は  array.prototype.push.apply を使ってループさせたりして開発効率を上げましょう。 forEach  /for ( a of list)構文や  map,   lamda , 即時間数 ( (x)=>{};)のやつや、関数を引数に載せたりしてどんどん開発しましょう。

以下MDNのサイトから

[2, 5, 9].forEach(logArrayElements);
let iterable = [10, 20, 30];
for (let value of iterable) {
  value += 1;
  console.log(value);
}
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots   の内容は [1, 2, 3] となる
// numbers の内容は [1, 4, 9] のまま

エラー無反応対策

jsがエラーで落ちるとメッセージも出さずに途中ぬけするので、 安定するまでは、最初や最後、通信部分に テストコードを置くかプリントデバッグをお勧めします。

ほんと無反応は困る。。

また try{}catch(error{console.log("error:" + error + "  line:"+error.lineNumber); などと怪しいところはキャッチしておくといいでしょう。 android開発時も無反応なので似てますね。

互換性

chrome

chrome は  browser モジュールがないため Firefox アドオンで  browser = browser || chrome; とすれば、どちらでもかなりの確率で動きます。 Edgeなどでもその部分がOKになります。 あとChromeではFIrefoxでできていた、非同期通信で  thenの使い方ができなく、 Promiseがないので修正が必要になります。 非同期通信のコールバック方式に変えておきます。 (async , await で処理をぶつ切りにする)

また android とは違うデベロッパー登録として、登録料がまた取られます。あの使いにくい迷いまくる開発ページと、導線の変更、よくわからない用語のページなのに。。

アプリケーションについては、MSと同じようにかなり、難しい審査が必要になると連絡がありました。

Edge

Edgeの互換性は遅れているようです。またサイト登録は個人では無理に近い様です。野良で配布する方針ですね。 また、 jsonに author タグを追加しないとNGって怒られました。

※追記  MSも chrome と同様の拡張方式を採用するようです。Operaも含めてかなり拡張が作りやすくなりますね。

サンプルプログラム

https://github.com/mdn/webextensions-examples に MDNのサンプルがあります。 MDNページからも辿れますので、オプションの保存方法など参考にしてください。

確認方法

JSコードの確認

Firefox コンソール横の scrach padか Create a new fiddle - JSFiddle  などのサイトを使ってもいいと思います。

JSON形式の確認

JSONLint - The JSON Validator なんてどうでしょうか

CSS/HTMLの確認

W3C CSS 検証サービス で検証できますし、Visual Studio Code(MS)を使うのもいいと思います。

アイコンサイトは

Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons

ICOOON MONOがおすすめです。 アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

98 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です