エスペラント翻訳ブラウザ拡張を公開(WebExtension)

lina_dicto for webextensionは、マウスで したエスペラントの単語を日本語に訳して表示するブラウザ拡張です。Firefoxに対応。Chrome対応を予定。
FireFox版の取得はこちらから。
ソースコードをgithubに公開しています。

マウスオーバーによる訳の表示

アドオン設定

lina_dictoはそもそもPC向けのエスペラント辞書アプリケーション(Win/Mac/Linux対応)です。
また、これを移植した Andorodアプリケーション版 も存在します。

技術的な話

lina_dicto for webextensionは、WebExtensionで作りました。
WebExtensionは、JavaScriptとjsonのテンプレートで、FireFox/Chrome等の、マルチブラウザ対応のブラウザ拡張を作ることができる技術です。

# ざっくり

- 名前空間は別なので名前空間トリック的なことはせずにベタ書きでいい。

#content_script.jsとbackground.jsの使い分け

content_script.jsはページに読み込まれるので、ページ毎にインスタンスが生成される。
background.jsはブラウザ上のタブ間で１つを共有する。

# webextensionから動的にアイコンを変更

webextension状態をアイコンに反映するコード。
``` : background.js
function setIcon(is){
    if(is){
        browser.browserAction.setIcon({path: "../icon/icon_48.png"});
    }else{
        browser.browserAction.setIcon({path: "../icon/disable_icon_48.png"});
    }
}
```

# background.jsのデバッグ

console.log()がデバッグコンソールに出ない。 Firefoxではアドオンのデバッグを有効にして、そのアドオンのデバッグリンクを押すと、別Windowでbackground.jsのデバッグコンソールが出る。
chromeもそんな感じ。

# タブ状態変更時のコールバック

新しいタブが作成された場合は `browser.tabs.onActivated.addListener(handleActivated);`
他は素直にonUpdate,onRemoveという名前が付いている。

# アクティブなタブの取得

background.jsはブラウザ上のタブ間で１つを共有する。
タブはtabIdで識別する。tabIdは同期的関数で取得することはできない模様。
`tabs.query()` のコールバックの中で取れる。使い方等は下記URL参照。
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/query
結果がtabsで帰ってくるので複数タブがactiveもありうるのだと思うが、カレントウィンドウのアクティブタブは一つしか無い気もする。今回作った作ったWebExtensionでは、とりあえずfor(tab in tabs)で取れるすべてに同じ処理を適用した。正しいかどうか不明。

# Firefoxでのbackground.persistent

manifest.jsonのbackgroundにpersistentを指定すると、Firefoxにその設定はないため、下記のエラーが出る。害はないので無視する
```
Reading manifest: Error processing background.persistent: Event pages are not currently supported. This will run as a persistent background page.
```

# chrome上でのbrowserオブジェクト

chrome上で`Uncaught ReferenceError: browser is not defined`というエラーが出る。chromeにはbrowserが提供されていないとのこと。
https://github.com/mdn/webextensions-examples/issues/194
を参考に、`var browser = browser || chrome`を追加して回避。
できるはずなのだが、今はまだ上手く行っていない。いずれやる。


```
Error in event handler for tabs.onUpdated: Error: Invocation of form tabs.query(object) doesn't match definition tabs.query(object queryInfo, function callback)
```

以上です。