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

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

Firefox10以前

Firefox11以降

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

【2026年08月04日追記】
ローカルファイルをFirefoxで開いた際に本アドオンが効かなくなっていたので、
「Firefox 153のローカルファイルアクセス制限について」セクションを追記しました。

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」にずらそうと思います。

Firefox 153のローカルファイルアクセス制限について(2026年08月04日追記)

いつの間にかローカルの画像ファイルをFirefoxで開いた際に本アドオンが動かない状態になっていました。
調べてみると先日リリースされたFirefox 153での拡張機能に対する変更の影響な様です。

■リリースノート
https://www.firefox.com/en-US/firefox/153.0/releasenotes/#changed

Extensions can no longer access local files by default.
Users can grant or revoke this access via the new "Access local files on your computer" permission,
separate from "Access your data for all websites".

Google翻訳すると、

拡張機能は、デフォルトではローカルファイルにアクセスできなくなりました。
ユーザーは、「すべてのウェブサイトのデータへのアクセス」とは別に、
新たに設けられた「コンピュータ上のローカルファイルへのアクセス」という権限を通じて、
このアクセスを許可または取り消すことができます。

という感じで、デフォルトでは拡張機能はローカルファイルにアクセスできなくなったようです。

個人的に画像の透過処理がキレイにできているかをFirefoxで見てチェックすることがちょいちょいあるので、
白背景で表示できなくなってしまうと困ってしまうんですよね。

リリースノートにも書いてありますが、拡張機能の管理画面から本アドオンの設定画面を開き、
「権限とデータ」のタブを見ると「ユーザーのコンピューター上のローカルファイルへのアクセス」という項目が増えています。


これがデフォルトではOFF状態になっているので、ONに変更すると今まで通りローカルファイルでも効くようになります。


アドオンのmanifest.jsonの「permissions」キーで使用する権限を宣言するんですが、
公式のマニュアルの
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_%E6%A8%A9%E9%99%90
を見てもそれっぽい権限が無さそうでした。
「storage」はアドオンの設定値とかを保存する時に使ってるやつなので、別物かなぁと思います。

まぁローカルファイルにアクセスするってのは全体で見ればマレな操作でしょうから、
使う人だけ許可設定を緩めてねって方針なのかもしれませんね。

という事で本アドオンを使いつつ、ローカルファイルでも動かしたい方はお手数をおかけいたしますが、
「権限とデータ」のタブからローカルファイルへのアクセス許可をお願いします。

アドオンを作ってる方は開発者センターで設定できるアドオンの説明欄に補足を書いておくと混乱を避けれるかもしれません。
こんな感じでインストール済みのアドオンの詳細タブに補足が表示されるので、利用者に気づいてもらえるかもしれません。

開発者センター

アドオンの詳細タブ