Firefoxのアドオン「Old Image Style」を作りました。

Firefoxのバージョン11から画像だけを表示した際に「中央配置・黒背景」で表示されるように変更されてしまいました。

Firefox10以前

Firefox11以降

これをバージョン10以前の「左上配置・白背景」表示に戻すために「Old Default Image Style」というアドオンを使っていましたが、
バージョン57(Quantum)にてアドオンの仕組みが変わってしまったため使えなくなってしまいました。
いつか誰かが移植してくれるのではないかと思っておりましたが移植される気配が無かったため作ってみました。

Old Image Style

ダウンロード

https://addons.mozilla.org/ja/firefox/addon/old-image-style/

ソース

https://github.com/forest-soft/firefox_addon_old_image_style

スクリーンショット

拡張機能を作る際にFirefox公式が出している

■初めての拡張機能
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

のページを参考にしつつ作りました。
やってることは単純で、ページ読み込み時に「bodyタグ直下の要素がimgタグ1個だけ」の場合は画像表示モードだと判断して
bodyタグとimgタグについてる「中央配置・黒背景」のスタイルを打ち消すCSSを流し込んでいます。
本当はDOMの状態から推測するのではなく
・通常のページモード
・画像表示モード
・動画再生モード
というようなブラウザが持ってる状態を受け取って確実に処理していきたいところなんですが、
そういう情報がどうやったら取得できるのか、そもそも取得できるような仕組みが用意されているのかわからなかったのでDOMの状態から推測することにしました。

ソース抜粋

if (document && document.body) {
    if (document.body.childNodes.length == 1 && document.body.childNodes[0].tagName == "IMG") {
        var image_element = document.body.childNodes[0];
        
        // 背景の黒画像を消す。
        document.body.style.background = "none";
        image_element.style.background = "none";
        
        // センター表示を打ち消す。
        image_element.style.right = "unset";
        image_element.style.bottom = "unset";
    }
}

なお、この処理だけだと画像のロードが終わるまで処理が実行されず、
ロード中は「中央配置・黒背景」表示、ロード後は「左上配置・白背景」表示という状態になってしまいます。
manifest.jsonに処理を実行するタイミングを変更できるような「run_at」という設定値があるため、
「document_start」を指定して実行タイミングを早めることによって解消しています。

■run_atの解説ページ
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts#run_at

「document_start」を指定すると通常のページではDOMの解析が終わっていないためdocument.bodyがnullになりますが、
画像表示のページではdocument.bodyとその配下のimgタグへアクセスできる状態になっているため、うまく打ち消せています。
※うまく行かなくなったら「document_end」にずらそうと思います。