ようこそ、Firefox 57 ＠うちの事情

Firefox

人呼んで、Firefox Quantum 。
UI が大幅に変更され、かなりスピードアップする半面、旧式のアドオンがすべて使えなくなってしまう。

9/20 だったかに 57.0b1 に更新してから二ヶ月近くもじたばたしてる。安定版を使っている人たちも 2017-11-14には直面することになる。

そんな Firefox 57（というか、もう 58.0b1 になってる）の、ぼくんとこの事情。

使っているアドオンの状況

あまりアドオンは入れてなかったのだけれど、それでもこういった状況になっている。

状況 Addon メモ
〇 ADB Helper デフォルトだから、対応してて当然
〇 uBlock Origin 対応してて良かった
〇 Valence デフォルトだから、対応してて当然
× Bookmark Favicon Changer 57 の前から、まともに動かなくなってたからなあ...
× Microsoft .NET Framework Assistant 要らない
× Pin It button 要らない
△ Stylish 代替あり
× Toggle Proxy 地味に利用頻度が高いからなあ...
× Session Manager 直前のセッションは復元できるし、ブラウジングライブラリーには、「最近閉じたウィンドウ」があるしなあ
× はてなスクリーンショット拡張 欲しい。自力で修正するのは、さすがにもう無理だ
× 英辞郎 on the WEB 検索ボックスを使う頻度の方が多いから、要らないかな
× Evernote Web Clipper 使ってないしな

入れているアドオンが少ないからこそ、無くなると困るのが多い。

Stylish → Stylus

https://addons.mozilla.org/ja/firefox/addon/styl-us/?src=find-replacement
about:addons の「代わりのアドオンを探す」で、一発で見つかるやつ。
Stylish 1.5.7 から fork したらしい（これを書いてる時点で、最新の Stylish は 2.1.1。旧式のアドオンの最後のバージョンらしい）
＃ これを書いてる時点では、Stylish も 3.0.1 になって WebExtension ベースになってる

今まで書いた Stylish のルールの引継ぐこともできる。
→ https://add0n.com/stylus.html#faq5
"Load as Temporary Add-on" は、locale が日本語では「一時的なアドオンを読み込む」。

Stylish が有効じゃないと設定をエクスポートできないとのことなので、Firefox 56.0b12 をインストールする
https://ftp.mozilla.org/pub/firefox/releases/
https://ftp.mozilla.org/pub/firefox/releases/56.0b12/win64/ja/

念のためにプロファイルを複製して、Firefox 56 を起動。
インストールした直後には、デスクトップに stylish.json ができている。

Firefox 57 で、ツールバーの Stylush のアイコンから「管理」を選択。
「スタイルをインポート」を選択。
これで、データの引継ぎは完了。

ちょっと不便なのが、Stylish では、編集したスタイルを保存する前に「適用」で効果が確認できたのが、「保存」しかないところ。
まあ、Inspector で確認してから記載することがほとんどだから、要らない、っちゃあ要らないのかもしれないけれど。


ちなみに、Stylus では、自分で書いたルールは、indexedDB に入れてるっぽい。
about:debugging で見ることができる「内部UUID」がキーになっていて、実体は これかな。

%Profile%\storage\default\moz-extension+++[内部UUID]\idb\*.sqlite

こいつの、object_data テーブルの data 列が多分そう。
「内部UUID」は、addon で一意なわけじゃなくて、インストール毎に違うっぽいので、プロファイルを引き継ぐときには、要注意（未検証）。

置き場所は分かったけど、謎なバイナリで値が読めないので、バックアップにしか使えない。

いや、値が読めないわけじゃない。
about:debugging からアドオンのデバッグで起動したブラウザツールボックスの「ストレージ」から、indexedDB もローカルストレージも中身を見られる。
分かりにくいけど ctrl-C でコピーもできる（DELETE で削除もできる？）。
まあ、いまひとつという感じではあるけれど。

storage.local の実体はというと、ここ。

%PROFILE%\browser-extension-data\uBlock0@raymondhill.net\storage.js

こちらは、内部UUID ではなく、拡張機能ID が使われている。
json のファイルなので、あまり大きなデータを入れるには不向きかな。


因みに、AMO の Stylus のページに書いてある、これ。

ただし残念ながら、WebExtensionsプラットフォームのセキュリティ上の制約のため、ブラウザのUIや内部ページへのスタイルの適用は禁止されています。
--
Unfortunately, due to security restrictions in the WebExtensions platform, styling of the browser UI and internal pages is prohibited.

ここ、とても大切。

これは、他のプラグインでも、その代替があるだろうか、というところに大きく効いてくる。
uBlock Origin で、旧→新で Myフィルタなどのデータを引き継げなかったのも、これが理由。
レガシーアドオンでは、ローカルデータへのアクセスが緩くて、自前の SQLite なファイルを持っていた（扱いやすいし）けど、WebExtension では、ローカルデータへのアクセスが厳しくて、storage.local か、IndexedDB しか使えない。

Toggle Proxy → ？

まずは、求めている機能が単純なこいつから探してみる。

やりたいのは、「PROXY なし」と「システム PROXY」を、ワンタッチで切り替えたいだけなのだけれど、どれも、なんか違う。
三番目のソースを読んでみた。
https://github.com/rNeomy/proxy-switcher

どうやら、WebExtension の API には差異があるらしく、この Proxy まわりはまるで互換がない。
https://developer.chrome.com/extensions/proxy
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/proxy
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities#proxy

Mozilla の方では、PAC を置き換えるしかできなくて、"Proxy mode" を変更できないみたい。
ソースを読んでみたやつは、Chrome の API っぽい Polyfill を書いてるだけだった。

うーん、まさかこいつをあきらめざるを得ないとは。

いずれ、実装されることを期待。
https://bugzilla.mozilla.org/show_bug.cgi?id=1283639
https://bugzilla.mozilla.org/show_bug.cgi?id=1285342
https://bugzilla.mozilla.org/show_bug.cgi?id=1295807
https://bugzilla.mozilla.org/show_bug.cgi?id=1419880

追記 ＠2018-3-12
Firefox 59 で、プロクシ設定の切り替え手段が実装された。
プロクシ系のアドオンも追随してくるはず。
→ Proxy 切り替えアドオン ＠Firefox 59 - おまえ、うまそうだな


はてなスクリーンショット拡張 → ？

ごまかしながらなんとか使ってきた「はてなスクリーンショット拡張」だけど、大幅に書き換えるのは、ちょっと手に余る。
アップロード先を指定できるようなスクリーンショット系のアドオンがないかと探してみたのだけれど。

Addon 保存先 編
集 		対象
範
囲 		要
素 		表
示 		全
体
Awesome Screenshot Plus Awesome Screenshot、Diigo、Google Drive
ローカル
クリップボード 		〇 〇 〇 〇
Nimbus Screen Capture Nimbus Web、Google Drive
Slack へシェア
ローカル 		〇 〇 〇 〇 〇
Web Clipper : Easy Screenshot ローカルのみ × 〇 〇 〇
Explain and Send Screenshots Imgur.com 〇 〇 〇 〇
UploadCC: Screen Capture Tool (Share or Save) upload.cc
Facebook、Twitter へのシェア
ローカル 		× 〇 △
Screenshot Addon c-ev.com × 〇
Gyazo Gyazo × 〇 〇 〇 〇

アップロード先が複数あるものもあるけれど、後から追加できるようになってるものは、ざっと探してみても当たらない。
認証とかもあるし、難しいのは分かる

Awesome Screenshot Plus
edit.html からの javascripts/edit.js で、SavePage.uploadImageToAS あたりを書き換えれば、アップロード先を変更できそうだけど、UI を追いかけるのが、ちょっと面倒そうな感じ。 いろいろと機能があるがゆえに。
→ Mozilla Public License
Nimbus Screen Capture
Nimbus Web というサイトにアップロードが主か。 Google Drive と Slack にも送り込めるみたい。 最近の評価が結構分かれてる。
→ 独自ライセンス。
Web Clipper : Easy Screenshot
ローカルに保存するだけなんだけど、逆にいじりやすいかも、というのはある。
軽快。
→ Mozilla Public License
Explain and Send Screenshots
editor.html → js/editor.js の uploadImage() 。 書き換えるのは簡単そう。
jQuery とか腹に抱えてるから、でかい。
→ 独自ライセンス。
UploadCC: Screen Capture Tool (Share or Save)
screenshot.js の function s() を書き換えれば良い。
こいつも jQuery を腹に抱えてる。 ソースは短い。
画面の切り出しを jQuery の Jcrop というやつを、まんま使ってるんだ。
http://deepliquid.com/content/Jcrop.html

browser.tabs.captureVisibleTab() で、見えている範囲だけをキャプチャする。 見えている範囲しかキャプチャできないけれど、その代わり about:addons のようなページもキャプチャできる。
Explain and send screenshots も同じ仕組みだ。
→ Mozilla Public License

Screenshot Addon
そもそも、きちんと動かない。

content-script.js の capture() が呼ばれて、img.onload の設定まではしてる。 onload のイベントが発火されなくて、cropped のメッセージを出せていない。 img.src の設定が後じゃないとダメなんじゃ？

Gyazo
結構、良い感じ。
→ MIT/X11 License

Gyazo のアドオンのソースを追っかけてみる

main.js 長い。
ああ、jQuery とかを中に抱えているからか（npm で pack）。
$.ajax を使うためだけに　:-/
実質、10682行目くらいからが、このアドオン。

クロスオリジンの問題は、manifest.json の Host permissions で解決する。
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions

アップロード後のプレビューは、ちょっと邪魔くさい。

ソースは、GitHub にある。
https://github.com/gyazo/gyazo-browser-extension

ver 2.7.1 みたいだ。
jQuery も使ってない

AMO のは、2.4.3 で、2016-6-30 に commit
https://github.com/gyazo/gyazo-browser-extension/commit/6caec18b812c630504e557b0ebb65f7e6e86ec43#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

Chrome WebStore は、2.7.0 で、2017-7-24 更新。
https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo?hl=ja

試しに、Chrome ウェブストアで配布されている v2.7.1 を Firefox に入れてみる
Chrome ウェブストアから、Google Chrome へのインストールではなく、拡張機能をダウンロードするには、ひと手間 必要。
https://chrome-extension-downloader.com/

extension ID というのは、Chrome ウェブストアの URL のここ。
https://chrome.google.com/extensions/detail/ffdaeeijbbijklfcpahbghahojgfgebo?hl=ja
.crx も ZIP フォーマットなので、普通のアーカイバで中を見られる。

about:addons の歯車から「ファイルからアドオンをインストール」
「このアドオンは壊れているためインストールできませんでした」だと。

ばらして、about:debugging から一時的なアドオンとして読み込むと、一応、インストールはできる。

manifest.json をいじったらインストールできた。

  • "update_url" を削除
  • "applications" を追加

でも、動かないなあ　(´・ω・`)
AMO が更新されていない理由はある、ってことか。

いや、右クリックの方は動く。
ツールバーの方からがダメだ。
あれ、使ってるうちにツールバーの方も行けるようになった。

分かった。
一度、ページの読み込みし直しをしないとダメなんだ。
コンテンツスクリプトの方が動くタイミングを作ってあげないと、正しく動かない、と。

さて...

Awesome
javascripts/edit.js ソースから UI 追いかけるのしんどい。
Nimbus
js/nimbusShare.js だろうか。 ソースから UI 追いかけるのしんどい。
Web Clipper
通信をつければ良いだけかな。
Explain and Send Screenshots
寄付しないと、あちこち使えん　(´・ω・`) インストールしてから、何日というやつか。
Upload CC
選択方法が少ない
Screenshot Addon
そもそも動かんし
Gyazo
プレビューを外すのめんどい

さて、どうするかなあ...

Bookmark Favicon Changer → ？

Stylish では、@namespace を指定するとツールバーとかの見た目もいじれた。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

Stylus は、というと、まず @document の指定がコードに書けなくて、「適用先」から選択するようになってて、その外側の @namespace は、どうするんだ、と。
というか、WebExtension の仕様上、ブラウザの UI 部分を変更することが そもそも無理らしい。

というわけで、Bookmark Favicon Changer に相当するアドオンは、現状の Firefox の WebExtension API では無理　(´・ω・`)ｻﾞﾝﾈﾝ

でも、もう元には戻れない体になってる。
Bookmark ツールバーには、それなりにフォルダを入れてるので、文字の説明をなくしてギュッと詰めて表示したい。
そのためには、フォルダの favicon を変えられないと不便で仕方ない。

実は、57 以前から、Bookmark Favicon Changer は、きちんと動かなくなってた。
その原因はふたつあって、ひとつ目はこれ。

This function will only save favicons for "good" URIs, as defined by what gets added to history or is a bookmark. For "bad" URIs, this function will succeed but do nothing. This function will also ignore the error page favicon URI (see FAVICON_ERRORPAGE_URL in nsIFaviconService.idl).

mozIAsyncFavicons - Mozilla | MDN

履歴として保存されている URL ではないものは、"good" URI ではない、らしい。
なので、Bookmarklet の favicon が変更できない。
＃ Firefox 50 くらいかららしい

もうひとつは、これ。

Bug 977177
move favicons blobs out of places.sqlite to their own database

977177 - move favicons blobs out of places.sqlite to their own database

パフォーマンス改善の一環として、favicon のデータが places.sqlite から favicons.sqlite に移動されている。
＃ こちらは、Firefox 55

Bookmark の favicon を登録する API では Bookmark のエントリしか更新できないので、Bookmark Favicon Changer は、フォルダの favicon を変更するために places.sqlite の favicon の URL を Data URI scheme に書き換えることで、フォルダの favicon を変えていた。

どちらも、WebExtension の範囲では、どうにもならない。

とりあえず、ブラウザの UI 部分の変更は、WebExtension では無理
　↓
Theming API というのも検討されてるみたいだけど、多分、その範疇じゃできない
　↓
フォルダの favicon は、userChrome.css で変更できる
　↓
Bookmark の favicon は、userChrome.css では変更できないっぽい
　↓
"bad" URI な Bookmarklet の favicon は、favicons.sqlite を直接いじってみる
　↓
favicons.sqlite は、URI のハッシュも持っていて、それが正しくないとダメ
　↓
ハッシュ値を作るしかないので、Firefox のソース読む
　↓
ソースは見つけたけど、なんか上手くいかない
　↓
軽く はまったけど、何とか正しいハッシュ値を得られた
　↓
URI とハッシュ値をペアで設定
　↓
面倒だけど、favicon の変更はできてる
　↓
Firefox 58.0b1 に更新
　↓
手で変更した Bookmarklet の favicon が、また表示されてない　orz
　↓
手で favicons.sqlite にレコードを追加するとうまくいかないけど、<link rel="shortcut icon" > をインスペクタで追加するとうまくいく（ハッシュの算出は間違ってないので、もうひとつ、何かのデータと関連している模様（今ここ

とりあえず、やり方が分かれば良い、という人向けに一筆 書いてみた。
＃ ここに至るまでの経緯も、別に書くかも

ちなみに、サイドバーのブックマークは、それひとつで大きな tree という要素で中身がいじれない。
グレーのフォルダー 不細工だよなあ。
普段、サイドバーは使ってないから良いけど。

アドオン以外の話

検索ボックスから英辞郎が消えてる...

アドオンの方（右クリックメニューから検索）は、ほぼ使ってなかったからアドオンはあきらめるとしても、検索ボックスから消えるのは困る。
延々と使いまわしたプロファイルには、まだ英辞郎のアドオンが残ってる。
でも、↓だとエラーになっちゃう。
https://www.logsoku.com/r/2ch.sc/software/1454262797/771

基本に戻って、AMO で検索して、↓で追加。
https://addons.mozilla.org/ja/firefox/addon/eijirou/?src=search

とりあえず、これで上手くいった。

検索エンジンを抱えているのは、sessionstore.json.mozlz4 っぽいんだけど、なんで消えちゃったかなあ。
.mozlz4 を解凍するにはひと手間必要なんだけど、また、それがきちんと動かなくて。
＃ これも、別に書くかも

ナビゲーションツールバー

そこに表示されている Browser Action と Page Action の話。

  • Browser Action ─ ツールバーの右側に出てるやつ
  • Page Action ─ アドレスバーの右側に出てるやつ

56 までは、ナビゲーションツールバーには、以下が表示されてた。

Pocket への保存は、アドレスバーに移動。
bookmark もアドレスバーで十分。
組み込みの Screenshot もアドレスバーに移動してた。

Bookmark ツールバーのアイコンの間隔

Bookmark ツールバーのアイコンの間隔が少し広くなってる。

ブックマークツールバーのアイコンの間隔が広くなったのはこれだ。

toolbarbutton.bookmark-item:not(.subviewbutton) {
    margin: 0 2px;
    padding: 1px 4px;
    -moz-appearance: none;
}

padding の 4px だな。
userChrome.css で、こうする。

toolbarbutton.bookmark-item:not(.subviewbutton) {
    padding: 1px 2px;   /* ← 1px 4px */
}

そういえば、マルチプロセス

とりあえず、無効にしてる。
無効にした状態でも体感できるくらい十分に速いし、マルチプロセスを有効にするとメモリを食う量が半端ない（タブもウィンドウも、どかどか開きっぱなしにして使うスタイルなので）。

マルチプロセスにしてないことでの制限があるとは想像してなかった。

「レスポンシブデザインモード」を選ぶと、

レスポンシブデザインモードは、マルチプロセス Firefox のウェブコンテンツで使用されるタブなど、リモートのブラウザータブにしか利用できません。
だと。

使用頻度は少ないから、マルチプロセスを有効にしたプロファイルを用意しておけば、ことは足りるのだけれど、Tab Suspender というアドオンもあるので、検討してみても良いかも。
ただ、Google Chrome には、専用の API が用意されているけれど、Firefox にはない。
https://add0n.com/tab-suspender.html#faq9
https://developer.chrome.com/extensions/tabs#method-discard
なので、Suspend されたタブが reload されたときに、どこまで復元されるかが微妙。
ブログを書きかけの状態でタブを開きっぱなしにしておく、とか、よくやっちゃうやつなので。

パンがなければ、自分で焼けば良いじゃない

無効にされたアドオンで、代替手段が見つかってないのは、ふたつ。
Proxy の切り替えは 現時点では諦めるしかない Firefox 59 で対応手段が提供されたので、残るはキャプチャを はてなFotolife にアップロードするやつ。

できることが かなり制限されたということは、逆に覚えることは少なくて済むわけで、いくつかのキャプチャ系のアドオンのソースを見ても、Bookmarklet に毛が生えた程度のものも多い。

んー、作るか　(´・ω・`)ﾒﾝﾄﾞｳ ﾀﾞﾅｱ


＃ とりあえず、こんな感じ