風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

Chrome 拡張機能を Firefox Quantum の WebExtensions にも対応させた例


前書き

とりあえず、自作の Chrome 拡張機能のうち、二つを Firefox Quantum (WebExtentions) にも対応させてみた。
Twitter 原寸びゅー – Firefox 向けアドオン
Twitter メディアダウンローダ – Firefox 向けアドオン
この際に修正した箇所を中心に、覚え書きを記しておく。

修正方法等

manifest.json

最初、次のような警告が出ていた。

Reading manifest: Error processing background.persistent: Event pages are not currently supported. This will run as a persistent background page.
Reading manifest: Error processing options_page: An unexpected property was found in the WebExtension manifest.

上の方は、

    "background": {
        "scripts" : [ "js/background.js" ],
        "persistent" : true
    },

の "persistent" オプションに関するもので、現状は Firefox ではサポートされておらず、無視される。動作的には特に問題ないので、このまま。

下の方は、

   "options_page" : "html/options.html",

に関するもので、エラーとなっているが、このままでもオプションページは開くことが出来る。
現在は、

    "options_ui" : {
        "page" : "html/options.html"
    },

という書き方になっているため、こちらに合わせておく。

jQuery

jQuery 読み込み時に、

  Content Security Policy: ページの設定により次のリソースの読み込みをブロックしました: self (“script-src moz-extension://7959b7cd-9bbb-443f-8362-df4673e654f6 'unsafe-eval'”) Source: onfocusin attribute on DIV element.

のようなエラーが出ていた。
どうも、v1.x 系を使用していると発生する模様(使用していたのは、v1.11.3)。
参考:Web Extension: Cannot load jQuery into background page, due to CSP - Development - Mozilla Discourse
これは、v2.x 系にて修正されているらしい。v2.2.4 にしたところ、発生しなくなった。

chrome.app.* は使わない

オプション画面の、拡張機能バージョンを取得する処理でエラーが発生していた。
原因は、chrome.app.getDetails().version を使用していたこと。
代わりに chrome.runtime.getManifest().version を使うことで解決した。
参考: Where is chrome.app officially documented? - Stack Overflow

browser.* ネームスペース対応

これまで chrome.* ネームスペースを使用していたが、今後の流れとしては browser.* ネームスペースを使う方が良さそう。
参考: Chrome incompatibilities - Mozilla | MDN

といいつつ、既存のものを全部書き換えるのは煩わしいので、各スクリプトの先頭に

window.chrome = ( ( typeof browser != 'undefined' ) && browser.runtime ) ? browser : chrome;

のような一行を入れておくことでお茶を濁してある。

なお、Firefox Quantum の WebExtensions では、browser と chrome の両方が定義されているが、コンテキストによって微妙に見え方が違う。

バックグラウンドコンテキスト(background)

chrome window.chrome browser window.browser
Chrome 拡張機能 × ×
Firefox WebExtensions
MS-Edge 拡張機能 × ×

ユーザーコンテキスト(content_scripts)

chrome window.chrome browser window.browser
Chrome 拡張機能 × ×
Firefox WebExtensions × ×
MS-Edge 拡張機能 × ×

独り言

とりあえず、Twitter 原寸びゅーTwitter メディアダウンローダに関しては、以上のような修正を行うことで、無事、Firefox Quantum でも動作するようになり、かつ、Google Chrome 上でもこれまで通り動作しているので、共用化できたと言える。
もともと、ユーザースクリプトとしては両方の環境で動作するように作成してあったため、最低限の修正で済んだといえる。
まぁ、細かい不具合は出ているのだが……。

Chrome 拡張機能の移植準備( Microsoft Edge 拡張機能編)


前書き

承前。
furyu.hatenablog.com

比較の意味もあって、Microsoft Edge に関しても拡張機能開発(移植)準備をしてみた。
結果から言えば、互換性や動作安定性が悪く、時期尚早だったな、と少し後悔している。

なお、MS-Edge の拡張機能は、まだ限られた開発者しか公開できない模様。
Microsoft Edge拡張機能の公開について - マイクロソフト コミュニティ
developer.microsoft.com

I have an extension ready for Edge. How can I get it submitted to the store?

For the Windows 10 Anniversary Update, we are intentionally starting with a small set of extensions. The list of extensions is locked - you can see the list at our extensions page here. We want to be mindful about what extensions are available on the platform and watch for telemetry and feedback and make sure the reliability, performance and functionality of the browser isn’t impacted by these new features. Extension developers can submit a request to https://aka.ms/extension-request to be considered for a future update.

Frequently Asked Questions - Microsoft Edge Development

拡張機能開発の手順

開発者向け設定の有効化

フラグ設定画面(about:flags)を開き、

f:id:furyu-tei:20171117203010p:plain
「開発者向け設定」の「☑ 拡張機能の開発者向け機能を有効にする (これによりデバイスが危険にさらされる可能性があります)」にチェックを入れる。

開発(移植)するアドオンの読み込み

右上にある「…」から、

f:id:furyu-tei:20171117203016p:plain
「拡張機能」を選択すると、[拡張機能の読み込み]というボタンが出来ている。

f:id:furyu-tei:20171117203024p:plain
これを押して、

f:id:furyu-tei:20171117203034p:plain
出てきたダイアログから、開発(移植)しようとする拡張機能の manifest.json が含まれたフォルダを選択する。

f:id:furyu-tei:20171117203039p:plain
マニフェストにエラーがあればその旨表示されるので、適宜修正して再読み込みする。
正常に読み込めたら、

f:id:furyu-tei:20171117203045p:plain
当該拡張機能が表示される(この時点で既に起動されている)。

ここで歯車アイコンをクリックすると、

f:id:furyu-tei:20171117204946p:plain
拡張機能の基本情報と操作用のメニューが表示される。

バックグラウンドページのデバッグ方法

拡張機能操作用メニューから

f:id:furyu-tei:20171117203052p:plain
「検査:バックグラウンド ページ」リンクをクリックすると、

f:id:furyu-tei:20171117203059p:plain
開発者ツールが開き、バックグラウンドページのデバッグを行うことが出来る。

オプション画面のデバッグ方法

右上にある当該拡張機能のアイコンをクリックすると、オプション画面がポップアップする。

f:id:furyu-tei:20171117203104p:plain
適当なところで右クリック(コンテキストメニュー)から、「要素の検査」を選択すると、

f:id:furyu-tei:20171117203110p:plain
開発者ツールが開き、オプション画面のデバッグが行える。

ポップアップから操作するのがやりにくい場合、少し面倒だがタブで開くこともできる。
拡張機能操作用メニューに表示されているIDから、

f:id:furyu-tei:20171117203124p:plain

ms-browser-extension://<拡張機能のID>/<オプション画面(HTML)への、manifest.json があるフォルダからの相対パス>

のようにして、URL が導かれるので、これをブラウザのアドレス欄に入れることで、オプション画面をタブで開くことが出来る。

f:id:furyu-tei:20171117203144p:plain

Chrome 拡張機能の移植準備( Firefox Quantum・WebExtensions 編)


前書き

Firefox が Firefox Quantum (57) になり、旧来のアドオンとの互換性が無くなり、Google Chrome 拡張機能等との互換性の高い WebExtensions という形式のみが使えるようになった。

WebExtensions とは、クロスブラウザで動作可能なアドオンを開発するための技術です。WebExtensions API の大半は、Google Chrome や Opera でサポートされている extension API と互換性があります。これらのブラウザ向けに書かれた拡張機能のほとんどは、少し変更を加えるだけで Firefox や Microsoft Edge でも動かせるようになります。また、WebExtensions API はすべて マルチプロセス Firefox に対応しています。

拡張機能とは何か? - Mozilla | MDN

それではということで、自作の Chrome 拡張機能を Firefox Quantum に移植してみようか(できればソースコードは完全に共通化したい)と思い立ち、とりあえず Firefox Quantum でのアドオン開発の準備をしてみた。

アドオン開発の手順

開発(移植)するアドオンの読み込み

f:id:furyu-tei:20171117072218p:plain
Firefox 開発ツール デバッガー(about:debugging#addons、≡→アドオン(Ctrl+Shift+A)→[歯車アイコン]→アドオンをデバッグ(B))を開き、「☑ アドオンのデバッグを有効化」にチェックを入れて、[一時的なアドオンを読み込む]を押す。

f:id:furyu-tei:20171117072224p:plain
開発対象となる拡張機能(アドオン)の manifest.json を選択して開く。

f:id:furyu-tei:20171117072229p:plain
manifest.json を元にして、当該拡張機能の情報が「一時的な拡張機能」欄に表示される。
ここで、エラーや警告等があれば、適宜修正する。
Quantum の manifest.json のチェックは、Chrome に比べてかなり甘いかも(適当にコメントっぽく書いた行とかでもエラーが出なかったり)。逆に、Chromeに持って行くとエラーが出てしまうことがあるので注意。

バックグラウンドページのデバッグ方法

f:id:furyu-tei:20171117072235p:plain
拡張機能のデバッグリンクをクリック。

f:id:furyu-tei:20171117072241p:plain
「リモートデバッグ接続要求」ダイアログが表示されるので、確認して[OK]を押す。
この手順を省略する方法はあるのかな……?

f:id:furyu-tei:20171117072247p:plain
開いた開発ツールを使ってデバッグを実施。

オプション画面のデバッグ方法

2018/02/09 追記:オプション画面(設定画面)は、アドオンマネージャ(about:addons)から、当該アドオンの[設定]ボタンで開くことが出来るのが分かった。
以下のような面倒なことをしなくて済む。
これ、前からそうだったっけ?……間抜けすぎるぞ>自分。



f:id:furyu-tei:20171117072251p:plain
オプション画面をデバッグしようと思って……

f:id:furyu-tei:20171117072256p:plain
コンテキストメニューを開くも、「要素を調査」とか出ない……どうやって開発ツールを開けばよいのか……

f:id:furyu-tei:20171117072301p:plain
……と、Firefox 開発ツール デバッガーの当該拡張機能のところに、マニフェストの URLというリンクがあるので、これをクリックしてみる。

f:id:furyu-tei:20171117072306p:plain
マニフェストがタブに開くので、URLの "/manifest.json" の箇所を……

f:id:furyu-tei:20171117072315p:plain
オプション画面の HTML がある相対パス(例では "/html/options.html")に書き換えて開く。

f:id:furyu-tei:20171117072323p:plain
すると、無事にオプション画面をタブに読み込むことが出来た。
後は、開発ツール([F12]、≡→ウェブ開発→開発ツールを表示(Ctrl+Shift+I))を開いて、デバッグを行うことが出来る。
もっとスマートな方法がありそうな気もする……。
→あった(上の追記参照)

Windows 10 のバージョン 1703 が酷かったので、急いで 1709(Fall Creators Update)を適用した

バージョン 1703 の憂鬱

先日、Windows 10 が自動的にバージョン 1703 になっていたのだけれど、自分の環境(NJ5700E)ではこれが酷かった。

  • Capsに割り当ててあったCtrlが無効化されていた
  • "Microsoft KM-TEST Loopback Adapter"(CIFS over SSH用)が削除されていた
  • Windows 10 アップデート前に、タスクバーにピン留めしてあったアプリの一部が消えてしまっている
    エクスプローラー、IE、Chrome、Firefox、Vivaldi、FileZilla等……サードパーティ製ブラウザが軒並み消えていたのには悪意を感じてしまう……
  • ↑を再登録しても、再起動したりログオフ/オンするともとに戻ってしまった
  • タスクバーを引き伸ばして2段の状態で「タスクバーを固定する」にチェックを入れているのに、再起動等すると一段の状態に戻ってしまう
  • MS-EdgeのTampermonkeyでユーザースクリプトがインストールできなくなった(アイコン点滅・読み込み状態がずっと続く)
  • 無効化してあった Windows Search が有効になっていた
  • WZ Editor 9(WZ 9.0.29)が起動しなくなってしまった
    これは最新の WZ 9.0.46 をダウンロードして入れなおすことで解消

バージョン 1709(Fall Creators Update)の適用後

1703 での対処方法を探すのも面倒だし、すでに 1709 が提供されていたので、これを適用後に対処することに。

新たな問題
  • ディスプレイアダプタ(NVIDIA GeForce GT 640M)が、「ビデオ コントローラー(VGA 互換)」となってドライバが入っていない
  • ハイバネーション(休止状態)が有効になっていて、hiberfil.sys がディスク容量を圧迫
自動解決
  • タスクバーにピン留めしていたアプリが消えたり、再起動で無くなったりといった症状は改善
  • MS-Edge の Tampermonkey の上記不具合は解消、普通に動作するように
手動で対応
  • Caps → Ctrl は手動で再度設定(Ctrl2capを使用)
  • "Microsoft KM-TEST Loopback Adapter"は再インストール
    デバイスマネージャー → 操作(A)→レガシ ハードウェアの追加(L)から入れ直し
  • Windows Search は手動で無効化(こちらの記事を参照)
  • ディスプレイアダプタは、NVIDIAドライバダウンロードからドライバをダウンロード・インストールして対応
  • hiberfil.sys を削除(こちらの記事を参照)
未解決
  • タスクバーを2段に引き伸ばした状態での「タスクバーを固定する」はうまく動かないまま(再起動等すると1段に戻ってしまう)

BIGLOBE光ネクストIPv4通信速度調査:PPPoE対v6プラス(平日と土日祝日の比較)

承前。
furyu.hatenablog.com

前回測定時に、平日と土日祝日で随分と(特にPPPoEの)傾向に違いがあるように思えたので、同じ日数分(19日分)のデータを使用して、平日と土日祝日とで分けてプロットしてみた。

平日と土日祝日の比較

平日

f:id:furyu-tei:20161129204321p:plain
02時~16時頃であれば、PPPoEの方がv6プラスよりも良い結果が出ているため、その時間帯ならPPPoEでも可……?
一般的な会社員にはいささか使いづらい時間帯ではあるが。

土日祝日

f:id:furyu-tei:20161129204334p:plain
03時~08時頃を除き、PPPoEでは速度の低下が著しいため、可能であればv6プラスを使用するのが吉。

ここ最近の推移

各期間(7日間)の時間帯毎の中央値をプロットしたものを参考までに示す。


2016/10/07~10/13

2016/10/14~10/20

2016/10/21~10/27

2016/10/28~11/03

2016/11/04~11/10

2016/11/11~11/17

2016/11/18~11/24