SingleFile: Save a complete web page into a single HTML file

Author here, it makes me really happy to see SIngleFile on the front page of HN. Thank you! I take the opportunity to make you aware of the upcoming impacts of the Manifest V3 [1], and for those who prefer zip files, I recommend you to have a look here [2].<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;gildas-lormeau&#x2F;SingleFile-Lite" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;gildas-lormeau&#x2F;SingleFile-Lite</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;gildas-lormeau&#x2F;SingleFileZ" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;gildas-lormeau&#x2F;SingleFileZ</a>

FYI - there’s an official standard (MHTML) for doing this that has existed for 20+ years and exists natively in browsers.<p><a href="https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;MHTML" rel="nofollow">https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;MHTML</a>

Can we please stop with the 17MB GIF images used as demos? They use up lots of data immediately as you open the page, and are impractical, you don&#x27;t know how long the animation is, can&#x27;t forward&#x2F;rewind, and you can&#x27;t press fullscreen on a mobile.<p>And GitHub supports embedded videos in README.md files, videos are generally smaller than GIF files and their disabled autoplay is a feature = you save your data until you press play.

I also want to give praise about the demo. It&#x27;s one of the best demos I&#x27;ve ever seen with such a project. Nice job!

I love, love this extension. I am working on an app to turn this into a single click bookmark system on Linux. Run an inotify service to watch your downloads and then process any Single file downloads to a database and update a browsable index.

Maybe a little OT, but founders should take a careful look at this landing page. That&#x27;s how you sell something. The demo is clear about the problem they&#x27;re trying to solve and it convinced me that their product actually solves it. It&#x27;s not just all the information they&#x27;ve included, but also the lack of irrelevant clutter.

Related: I used to keep a collection of locally mirrored web pages a long time ago, with a legendary Firefox extension called <i>ScrapBook</i> [0] (now long retired). The surprise for me is that after all these years I still remembered the name...<p>While writing this comment I found that it lived on as a (now &quot;legacy&quot;) new extension named <i>ScrapBook X</i> [1], and then yet another one named <i>WebScrapBook</i> [2], which seems to still be alive!<p>[0]: <a href="http:&#x2F;&#x2F;www.xuldev.org&#x2F;scrapbook&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.xuldev.org&#x2F;scrapbook&#x2F;</a><p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;danny0838&#x2F;firefox-scrapbook" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;danny0838&#x2F;firefox-scrapbook</a><p>[2]: <a href="https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;webscrapbook&#x2F;" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-US&#x2F;firefox&#x2F;addon&#x2F;webscrapbook&#x2F;</a>

Should be noted Manifest V3 will break this extension for chromium based browsers.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;gildas-lormeau&#x2F;SingleFile-Lite" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;gildas-lormeau&#x2F;SingleFile-Lite</a>

What a cool project! I love the way this embeds images. One of things I miss most, though, when going back to old sites, is embedded audio or video. From looking at the options, it seems like it might be able to handle encoding video and&#x2F;or audio as Data URIs, but it&#x27;s not totally clear if SingleFile does this or not. I wasn&#x27;t sure if I was doing the correct things to force this behavior in the options. It would be great if the README could clarify how these are handled by SingleFile. Sometimes it might be nice to be able to embed these sorts of things, even if it does make the HTML ridiculous and bloated. Or, barring that, maybe just a recommendation to use one of the other formats in the comparison table for this kind of use case.

Unfortunately that won&#x27;t allow you to click links in your offline version. you can do this properly with wget: (sorry I don&#x27;t know how to do code formatting in hackernews)<p>wget --mirror \ --convert-links \ --html-extension \ --wait=2 \ -o log \ <a href="https:&#x2F;&#x2F;example.com" rel="nofollow">https:&#x2F;&#x2F;example.com</a>

Been eyeing this for a long time!<p>I&#x27;m building a bookmark app, and I plan to use this to save bookmarks!<p>I&#x27;m a simple man, nothing too fancy. Here&#x27;s a crude demo in progress - <a href="https:&#x2F;&#x2F;zewallet.netlify.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;zewallet.netlify.app&#x2F;</a> Follow progress here - <a href="https:&#x2F;&#x2F;twitter.com&#x2F;recursiveSwings&#x2F;status&#x2F;1491772387464908805" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;recursiveSwings&#x2F;status&#x2F;14917723874649088...</a><p>Would love to have ANY tips or feedback!

This is great. I&#x27;ve always wondered why this isn&#x27;t the default behaviour for page saving in browsers. To an ordinary user saving a page implies saving a single file, not a file plus a directory of stuff. HAR can be useful but seems only for niche or specialised reasons.

I use HAR file extractor because normally I don’t want a single file I want a replica of the web servers file system structure including any dynamically loaded assets <a href="https:&#x2F;&#x2F;blog.cetinich.net&#x2F;content&#x2F;2022&#x2F;download-website-and-all-assets&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.cetinich.net&#x2F;content&#x2F;2022&#x2F;download-website-and-...</a>

From the warning before installing in FireFox:<p><pre><code> Add SingleFile? This extension will have permission to: - Access your data for all websites - Input data to the clipboard - Extend developer tools to access your data in open tabs - Download files and read and modify the browser&#x27;s download history - Access browser tabs </code></pre> ... all of which I don&#x27;t mind, as long as the extension can&#x27;t exfiltrate any of the data it can access (send it to a third party). i.e.<p><pre><code> - no network connections from the extension - no modifying web pages or executing any code in the context of a web page </code></pre> Does anyone know whether these sorts of extensions <i>can</i> exfiltrate data? -- this is a concern if the project author&#x27;s credentials are stolen by a threat actor, which has happened before.

Security question: Is a web extension safe if it is installed but if you&#x27;re not using it at the moment? For example, if I were logged into my bank&#x27;s website and I did <i>not</i> click the SingleFile button in the extension toolbar, could it still theoretically collect info from my bank&#x27;s webpage or do other actions?<p>I&#x27;d like to use SingleFile and have no reason at all to distrust it, but I&#x27;d like to understand the security impact of installing lots of web extensions. How do people handle security risks like that? Do you run a separate vanilla browser with no extensions for sensitive tasks?

How old is that demo gif? I just tried reproducing the normal saving shortcomings, and the bottom image (&quot;Example of an SVG image with embedded JPEG images&quot;) loads just fine from the local folder, so this seems outdated.<p>That being said, it&#x27;s a bit weird that this kind of tool is even necessary at all. I would have expected native saving to include CSS background graphics as well, but apparently they don&#x27;t for some reason, so I think this is pretty useful. Until now, I have also used pandoc (--standalone) to merge all resources into a single HTML file which worked great.

We really, really need Web Bundles to progress and fix these problems correctly, once and for all. There are a lot of things that a tool like this can never get right, and the rest is complicated work that should never need to be done if we have a standard multi-file bundle format.<p><a href="https:&#x2F;&#x2F;wicg.github.io&#x2F;webpackage&#x2F;draft-yasskin-wpack-bundled-exchanges.html" rel="nofollow">https:&#x2F;&#x2F;wicg.github.io&#x2F;webpackage&#x2F;draft-yasskin-wpack-bundle...</a>

I was hoping this tool also solved a problem that comes from saving &amp; reproducing JS-framework-heavy websites.<p>Here&#x27;s the bug: According the HTML spec, elements like &lt;h2&gt; and &lt;div&gt; cannot be inside &lt;a&gt; tags. But using js you _can_ push &lt;div&gt;s instead of &lt;a&gt;s. (It happens from document.insert-type functions, frameworks like Angular&#x2F;React allow this)<p>Look at nasa.gov, there&#x27;s html:<p><pre><code> &lt;a href=&quot;&#x2F;press-release&#x2F;nasa-invites-media-to-next-spacex-commercial-crew-space-station-launch-0&quot; date=&quot;Wed Mar 02 2022 10:35:00 GMT-0800 (Pacific Standard Time)&quot; id=&quot;ember196&quot; class=&quot;card ubernode cards--card cards--2row cards--2col nodeid-477815 ember-view&quot;&gt;&lt;div class=&quot;bg-card-canvas&quot; style=&quot;background-image: url(&#x2F;sites&#x2F;default&#x2F;files&#x2F;styles&#x2F;2x2_cardfeed&#x2F;public&#x2F;thumbnails&#x2F;image&#x2F;51846702013_a0cc55100a_k.jpeg);&quot;&gt; &lt;!----&gt; &lt;h2 class=&quot;headline&quot;&gt; ... &lt;&#x2F;h2&gt; &lt;&#x2F;div&gt; &lt;&#x2F;a&gt; </code></pre> After running this through SingleFile you can visually see the changes, but the html changes are:<p><pre><code> &lt;a href=&quot;&#x2F;press-release&#x2F;nasa-invites-media-to-next-spacex-commercial-crew-space-station-launch-0&quot; date=&quot;Wed Mar 02 2022 10:35:00 GMT-0800 (Pacific Standard Time)&quot; id=&quot;ember196&quot; class=&quot;card ubernode cards--card cards--2row cards--2col nodeid-477815 ember-view&quot;&gt;&lt;&#x2F;a&gt; &lt;div class=&quot;bg-card-canvas&quot; style=&quot;background-image: url(&#x2F;sites&#x2F;default&#x2F;files&#x2F;styles&#x2F;2x2_cardfeed&#x2F;public&#x2F;thumbnails&#x2F;image&#x2F;51846702013_a0cc55100a_k.jpeg);&quot;&gt; &lt;h2 class=&quot;headline&quot;&gt; ...&lt;&#x2F;h2&gt; </code></pre> The way that sites like Wayback Machine handle this is by using the web-replay library Wombat <a href="https:&#x2F;&#x2F;github.com&#x2F;webrecorder&#x2F;wombat" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;webrecorder&#x2F;wombat</a> that also uses JS to insert those elements.<p>But what the hell! I was working on a similar html-downloading&#x2F;reproducing tool and this bug really bothers me. I&#x27;d either like the HTML reading standard to be updated to accept &lt;div&gt; inside of &lt;a&gt;, or <i>also</i> make that impossible to do via JS.

The list of problems that Manifest V3 causes are just more reasons to never use Chrome.

&gt; For security reasons, you cannot save pages hosted on <a href="https:&#x2F;&#x2F;chrome.google.com" rel="nofollow">https:&#x2F;&#x2F;chrome.google.com</a>, <a href="https:&#x2F;&#x2F;addons.mozilla.org" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org</a> and some other Mozilla domains.<p>Interesting. What is it about those pages that makes saving them raise security issues?

Does this simply remove the JavaScript or do something more clever? Because I think in the age of SPAs, the proper way to save &quot;content pages&quot; might be to execute the JavaScript once and serialize the resulting DOM back to HTML. I didn&#x27;t find anything in the FAQ that explains if it does something like that.

That&#x27;s a nice and simple tool, good work. I&#x27;m personally using Zotero to save copies of web pages: <a href="https:&#x2F;&#x2F;www.zotero.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.zotero.org&#x2F;</a>. With the browser extension you can save a snapshot in a few seconds.

Similar project -&gt; <a href="https:&#x2F;&#x2F;github.com&#x2F;Y2Z&#x2F;monolith" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Y2Z&#x2F;monolith</a><p>(I used both and ended up favoring monolith, but can’t remember why. I think they’re pretty comparable&#x2F;am grateful for both of them)

How to toggle reader mode&#x2F;readability? It doesn&#x27;t seem to be able to save pages when I toggled chromium&#x27;s reader mode on.<p>I followed the other advice on this thread. In the options:<p>- Annotation editor &gt; default mode &gt; format the page<p>- Annotation editor &gt; annotate the page before saving<p>It automatically format the page into reader mode then I can click &quot;Save the page&quot; icon to save it. But sometimes I want to download the page as is. Like this thread for example. &quot;Restore all removed elements&quot; button doesn&#x27;t seem to work to revert the changes.<p>For now I just set default as mode as normal and enable &quot;annotate the page before saving&quot;, and then click &quot;Format the page for better readability&quot; when needed.

The most impressive part of the demo is seeing how tidy his Downloads folder is!

Nice project! This project, and a similar project called Monolith[0], was a bit of an inspiration for making my own single HTML file tool called Humble[1] to solve a few edges cases I was having with bundling pages (and since I wanted a TypeScript API for making page bundles).<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;Y2Z&#x2F;monolith" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Y2Z&#x2F;monolith</a><p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;assemblylanguage&#x2F;humble" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;assemblylanguage&#x2F;humble</a>

I&#x27;m building a tool for people have a personal archive to their digital life so that 30 years from now they can revisit content they enjoyed in their younger years.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;sergiotapia&#x2F;ekeko" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;sergiotapia&#x2F;ekeko</a><p>This is awesome! I would love to integrate this somehow into my project to &quot;singlefile&quot; bookmarks as people make them.<p>@gildas do you have any recommendation on how to approach this with your extension? Could I run a headless chrome and trigger this extension?

Love this. Use it all the time. Handy for saving huge pages with all the styling intact for reading offline (like on a plane). You could save a webpage as a PDF, but I prefer this over a PDF.

Is this still on track to become a standard? <a href="https:&#x2F;&#x2F;github.com&#x2F;WICG&#x2F;webpackage" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;WICG&#x2F;webpackage</a>

Even after reading the praise here I wasn’t prepared for how good and useful this extension is. It’s a perfect solution for saving local copies of web pages. I do this frequently, and am surprised I didn’t know about this until today. Even the way it handles settings for the extension is great, with good, built-in documentation. The ability to add annotations is icing, and since they become part of the HTML there is no lock-in or special file format needed.

This is good for people who don&#x27;t have constant internet access who need to reference web resources offline.<p>Webpage saving technology does not seem to have kept pace with the evolution of the web.<p>Images loaded by CSS aren&#x27;t saved at all. JavaScript on the page will often hijack a saved page and not let it display at all.<p>One option that works fairly well and does not require installing a browser extension is to save the page as a PDF.<p>I wish browser developers would put more effort in this area.

This is what 10 year old me thought &quot;Save As&quot; in IE would do, but soon realized the harsh reality of &quot;that&#x27;s not how any of this works&quot;.

Does it have the option to automatically save every page you navigate to? There were some extensions back in the 2000s (&quot;slogger&quot; I think was one, &quot;shelve&quot; or something similar was another) but I don&#x27;t think they work any more. The pages I think to save now are never the ones I want to look at 5 years down the road.

If you keep the javascript, you also get the world&#x27;s most portable (desktop) application format...

Opening the repo makes you download a 17MB gif. I hope you are not on expensive mobile connection.<p>p.s. the demo is nice

Why does this need to:<p>- Read and change all your data on all websites<p>- Modify data you copy and paste<p>- Manage your downloads<p>Is there a way to use a version that requires less of these permissions? e.g. it seems we can address the first permission by only activating it on click, but I&#x27;m not sure if that addresses the other ones.

Relevant &#x27;awesome&#x27; list for web archiving: <a href="https:&#x2F;&#x2F;github.com&#x2F;iipc&#x2F;awesome-web-archiving" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;iipc&#x2F;awesome-web-archiving</a><p>There are many similar tools there, from archiving to rendering.

In the olden days, Internet Explorer used to allow you to do this by saving the page to a HTM file. It would be a single archive with HTML and images etc embedded.<p>New browsers don&#x27;t seem to do this, the create a separate folder for the assets, which is super annoying.

Dang it, he beat me to it! I have been toying with the idea for quite some time, but this implementation is great, better than mine would have been, so I&#x27;m glad he did it.<p>Maybe I&#x27;ll make a CLI implementation (sorta like wget but with this tacked on...)

This is great for a page. I&#x27;d love to see it expanded to include an entire site.

Chrome can save to a single file (.mhtml). I am not sure I understand the difference.

Great stuff!<p>For some reason, I went in expecting to see a JS-enabled multi-page web site into a SPA in a single HTML file, but I didn&#x27;t expect to see images get embedded.<p>Perhaps offer a recursive traversal option too, but don&#x27;t try that on Wikipedia :)

Back in the day this was always one thing that had me begrudgingly and shamefully opening IE so I could save a page as an MHT file. So long ago now. Cool to see this idea has been revived and not in a proprietary way

I love SingleFile and have been using it for years! Is there any version that works on current mobile browser versions? I&#x27;ve stuck with an old version of Firefox on Android that still supports the extension.

Thanks for this. I expected to see a pricing link somewhere, having been attuned to all the subscription Saas these days. Glad to see there are tools offering immense value for free still.

I use SavePageWE, it can save the page (into single file) as it was modified by JS after load, which is often useful.<p>The only thing I miss I wish it was easier to script.

I have been using WebScrapBook (an add-on for Firefox) for some time. I really like it. Has anyone else some experience with this add-on? Good or bad.

I&#x27;ve been using this since Martin posted about it on Ghacks. Love using it and thank you gildas.

Thank you! I&#x27;ve been looking for this for a while, nice to see someone finally did it!

Microsoft had something called MHTML that did this about 20 years ago ... Tablet PC era.

Naming a thing takes creativity and luck. Congratulations on an excellent name!

Does it create an inline dataurl for each image even if they&#x27;re the same?

This would be very useful in many situations, and a great demo!

I&#x27;d also recommend &quot;Print Edit WE&quot; and &quot;Save Page WE&quot; [2] for Chrome type browsers, both by one author. First one allows for editing of the page before printing&#x2F;saving (as a single page HTML or MHTML), second one allows for single-page save.<p>[1] <a href="https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;print-edit-we&#x2F;olnblpmehglpcallpnbgmikjblmkopia" rel="nofollow">https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;print-edit-we&#x2F;olnb...</a> [2] <a href="https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;save-page-we&#x2F;dhhpefjklgkmgeafimnjhojgjamoafof" rel="nofollow">https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;save-page-we&#x2F;dhhpe...</a>

If it’s a single file, then how do the images get stored?

You read my mind, I was exactly looking for that!

using it to export logseq page, works perfectly.

wget -r url ?

Ah, millennials invented .mht

Iran has a habit of using tools like this to trick defense contractors into using their page.