【SingleFile】ウェブサイトを1つのHTMLとして保存する拡張機能

この記事では、ウェブサイトを単一のHTMLとして保存してくれるChrome拡張機能「SingleFile」について書きます。
画像やCSSのレイアウトも全て1つのファイルにまとめてくれます。後で見返す用に便利です。
PC版「Google Chrome」のデフォルトの「名前を付けて保存」だと、HTMLファイルとは別で素材を保管する用のフォルダーが生成されてしまいます。

HTMLファイルを移動すると自動的にフォルダーもセットで移動され、HTMLファイルを削除したら自動的にフォルダーも削除されますが、見た目上は2つある状態です。ちょっとごちゃごちゃします。

ファイル保存時にファイルの種類を「ウェブページ、完全」ではなく「ウェブページ、1つのファイル」にすることでmhtmlファイルとして保存してくれます。
mhtmlだと1つのファイルにしてくれますが、画像を読み込んでくれなかったり、レイアウト(CSS)が崩れて元のページ通りには表示されないことが多いです。

本記事で紹介する拡張機能を使って保存することで、1つのHTMLファイルにまとめてくれて、かつ画像やCSSのレイアウトもちゃんと維持してくれます。
独自の拡張子ではなく、画像などのデータを埋め込んだ状態のHTMLファイルで保存してくれるので、仮に本拡張機能を削除しても一度保存したHTMLファイルはいつでも完全な状態で見れます。
「今見ているサイトをまた後から見返したいなぁ~。いつサイトが見れなくなるか分からないからローカルに保存しておきたい!」って時に便利です。
リリース元:Gildas Lormeau(GitHub、Bluesky)
記事執筆時のバージョン:1.22.81(2025年4月2日)
インストール方法
Chromeウェブストアからインストールできます。Edge版やSafari版(iOS)もあります。
Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。Android版も用意されています。
「Firefoxへ追加」をクリックします。
「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニュー内に拡張機能ボタンが追加されればOKです。
使い方
HTMLファイルを保存
HTMLファイルとして保存したいウェブページを開きます。拡張機能インストール前に既に開いていた場合は一度ページをリロードします。
ウェブサイトの空いている場所を右クリック→「SingleFile」→「SingleFileでページを保存」をクリックします。

左下に進行状況が表示されるので終わるまで待ちます。

ステップ3/3になればOKです。ウェブサイトによって差があると思いますが、大体30秒もあれば完了すると思います。

一つにまとめたHTMLファイルが保存されます。

保存したHTMLを確認
ブラウザ既定の保存場所に保存されています。拡張子はhtml、名前は保存したサイトの名前+日時になっています。
本拡張機能の特徴として、HTMLファイルの容量が大きいです。

フォルダーを別途作成せず、レイアウトや画像などのデータを全て埋め込んでいるので、その分通常の方法で保存するより大きいです。まぁとはいえ、大きくても20MBとかのレベルで数百MBや何GBの話ではないので大したことはないと思います。
任意のブラウザで開いて確認します。ちゃんと配置も正しく、画像も全て読み込まれていました。

一度保存したらデータは全てHTMLファイルに保存されるので、拡張機能を後から削除したり、拡張機能を入れていないブラウザで開いたとしても壊れずに表示されます。
自動更新機能はないので保存した時点での情報です。
既存の方法で保存しちゃったHTMLを変換する手順
「拡張機能は最高だけど、もう本拡張機能を入れる前に通常の方法で保存しちゃったよ~~!一つにまとめられない?」って方のために紹介します。
拡張機能のオーバーフローメニュー内にある「SingleFile」の三点ボタン(⋮)→「オプション」をクリックします。

オプションダイアログを閉じて拡張機能のページにします。
「ファイルの URL へのアクセスを許可する」をクリックしてオンにします。

これでローカル上のファイルでも本拡張機能が使えるようになります。
既に通常の方法で保存しちゃったHTMLファイルを開いて、右クリック→「SingleFile」→「SingleFileでページを保存」をクリックします。

ちゃんと1つのHTMLファイルにまとめられます。

ただし、通常の「名前を付けて保存」で保存した時点で、一部画像やレイアウトが崩れている可能性があります。その場合はもう本拡張機能で変換してもそのままです。
もしそのページを再表示できる状態であれば再表示して拡張機能で保存するのが一番かなと思います。
僕の場合、ノートPCの購入完了画面をHTML保存したくて拡張機能導入前に通常の方法で保存していました。通常の方法だとやっぱり画像やレイアウトが一部崩れていました。
でもその画面を再表示するには全く同じオプションで同じPCを買わないと表示されないので、諦めて一部画像が欠落しているHTMLファイルを開いて本拡張機能で変換しました。
感想
以上、ウェブサイトをフォルダーで分けずに単一のHTMLとして保存してくれるChrome拡張機能「SingleFile」についてでした。
本音を言うと、ブラウザ側のファイル保存が優秀になったら拡張機能をわざわざ入れなくてもいいので丸く収まります。もしかしたら開発者ツール経由とかならできるのかもしれませんが。
ディスカッション
コメント一覧
まだ、コメントがありません