風柳メモ

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

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

Evernote からエクスポートした HTML を Word 文書に一括変換する方法を調べてみた

Evernote のノートは HTML 形式でエクスポートできるが、そのままでは編集しづらいので Word 文書にできないか? という相談を受けたので、調べてみた。

基本的には、

  1. Evernote で対象となるノートを選択し、「複数の Web ページファイル (.html) でエクスポート」にてエクスポート
  2. Word で HTML ファイルを開き、Word 文書 (.docx) として保存しなおす

でいけるような気がしたが、 手動でいちいち変換するのは面倒なので、VBScript でまとめて処理できるようにしようとした。

ところが、VBScript に不慣れなのと、思わぬ問題も出てきて試行錯誤が必要になったため、その覚え書きとして記事の形にまとめておく。




EvernoteHtmlToWord (VBScript)

最終的にできあがった、Evernote からエクスポートした HTML を Word 文書化するための VBScript。
github.com

使い方
  1. Evernote から、ノートを HTML Web ページファイル (.html) 形式でエクスポートする(このとき、オプションとして、「作成日」にチェックを入れておく)
  2. EvernoteHtmlToWord.vbs に、1. でエクスポートした *.html(もしくはそれを含むフォルダ)をドラッグ&ドロップすると、同じフォルダ内に「<作成日を元にしたタイムスタンプ>-*.docx」が出力される



VBScript の処理内容と試行錯誤など

やっていることは、ドラッグ&ドロップされた *.html ファイル(もしくは、フォルダ直下に含まれる *.html ファイル)を順に Word で読み込み、Word 文書 (*.docx) 形式で保存しているだけ……なのだけれど、意外と苦労した。

画像が外部参照になってしまう

Word で HTML を読み込み、そのまま形式を Word 文書 (*.docx) として保存しただけだと、画像が外部ファイルへのリンクのままとなってしまう。
文書内に画像を埋め込もうとすると、 Word 上の操作では、

「ファイル」タブ→(右側の「関連ドキュメント」の)「ファイルへのリンクの編集」で、『種類:図』のリンク元ファイルを選択し[リンクの解除]を実施、「☑ 文書に図を保存する」にチェックをして[OK]をクリック

となるような処理を、VBScript 上でも行う必要があった。

Sub EmbedImages

Sub EmbedImages( objDocument )
    For Each objShape In objDocument.InlineShapes
        If Not objShape.LinkFormat Is Nothing Then
            objShape.LinkFormat.SavePictureWithDocument = True
            objShape.LinkFormat.BreakLink
        End If
    Next
End Sub

※参考:word VBA for save picture in document - Stack Overflow


ファイル名にタイムスタンプを付けたい

ファイル名で並べたときに、時系列順にしたいという要望があった。
これは、Evernote からエクスポートした際、オプションで「☑作成日(C)」にチェックして、*.html ファイル内に「作成日」等を埋め込み、これをファイル名に反映することで対応。
地味に、Wordの全テキスト取得方法を調べるのに手間取った……
Function EvernoteTimeStamp
ファイルの作成日時・更新日時を変えるようにした方がよかったかも?
更新日時については変更するようにしてみた(作成日時は変更方法がわからなかった)

タイムスタンプの時刻が一桁のときがある

Evernote からエクスポートした *.html の作成日は、「作成日: 2016/11/19 2:34」のように、時刻が一桁の時があるが、ファイル名に使うなら 0 パディングしたかったので、処理を追加。
Function PadLeft
※参考:まいてっくぶろぐ - 【VBS】文字列が指定桁数に満たない場合、0詰めする関数

作成日がうまく取得できない(日本語文字列が検索でひっかからない)

"作成日[^\d]*(\d+)/(\d+)/(\d+)[^\d]*(\d+):(\d+)" のような日本語を含む正規表現で検索しようとすると、うまくいかない。
これは、VBScript ファイル (EvernoteHtmlToWord.vbs) を UTF-8 で保存していたため。
ファイル形式を Unicode に変更すると、うまく検索できるようになった。
ファイル形式は Shift JIS でも可。

ファイル名が原因で変換されないファイルがある

ドラッグ&ドロップで指定したファイルのいくつかが変換されていなかった。
調べてみると、ファイル名に『〜』(U+301C)や『プ』(U+30D5 U+309A)等の文字が含まれる場合には、うまく変換できない模様。
これはどうも、WScript.Arguments からファイル名を取り出した時点ですでに化けてしまっているらしく、<FileSystemObject>.FileExists() が False を返す。

当該ファイルを直接ドラッグ&ドロップする場合にはうまい解決策が見つからなかったが、それらのファイルが入ったフォルダをドラッグ&ドロップし、<FileSystemObject>.GetFolder() で取得した Folder オブジェクトFiles コレクションからパス名(.Path)を取得するようにすると、こちらはうまく処理できる模様。

ドラッグ&ドロップするファイル数が多すぎると実行できない

ファイルをドラッグ&ドロップで指定する場合、数が多すぎると「実行できません。引数一覧が長すぎます。」というダイアログが出て、実行できない模様。
VBScript の制限だと思われる。自分の環境では、495ファイル以上でファイルで発生(494ファイルはOK)。これがマジックナンバーなのか、その他の要因があるのかは不明。
この場合は、対象ファイルが入ったフォルダをドラッグ&ドロップしてやれば、その中に495ファイル以上の *.html があっても、実行可能。