SingleFile: A Browser Extension and CLI Tool for Saving Complete Webpages as a Single HTML File

When using a browser’s built‑in “Save page as” feature, images are often lost and many auxiliary files are created; SingleFile, a popular open‑source project on GitHub, solves this problem by saving a complete page into a single HTML file.

Overview : SingleFile is both a browser extension and a CLI tool that quickly converts a fully loaded web page into a single HTML document. It is compatible with Chrome, Firefox (desktop and mobile), Edge, Vivaldi, Brave, Waterfox, Yandex, Opera and other mainstream browsers.

Installation :

Firefox: https://addons.mozilla.org/firefox/addon/single-file

Firefox mobile: https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/

Chrome: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle

Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno

Manual zip download: https://github.com/gildas-lormeau/SingleFile/archive/master.zip (follow the manual‑install steps below)

Simple usage : After a page finishes loading, click the SingleFile button in the extension toolbar to save the page; click it again to cancel. The extension’s context menu also allows saving the current tab, selected content, or selected frame, and can process multiple tabs at once (selected, unfixed, or all tabs). Additional options let you annotate, highlight, add or delete content, enable auto‑save, and specify the download folder.

Command‑line interface :

SingleFile can be run from the command line using Node.js as the injection engine.

Docker installation

docker pull capsulecode/singlefile<br/>docker tag capsulecode/singlefile singlefile<br/>

Manual installation

git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git<br/>cd SingleFile/cli<br/>docker build --no-cache -t singlefile .<br/>

Running

docker run singlefile "https://www.wikipedia.org"<br/>

To redirect output to a file:

docker run singlefile "https://www.wikipedia.org" > wikipedia.html<br/>

Manual (npm) installation

npm install -g "gildas-lormeau/SingleFile#master"<br/>

Or download and unzip the source, then install dependencies:

unzip master.zip .<br/>cd SingleFile-master<br/>npm install<br/>cd cli<br/>

Or install directly from the git repository:

git clone --depth 1 --recursive https://github.com/gildas-lormeau/SingleFile.git<br/>cd SingleFile<br/>npm install<br/>cd cli<br/>

Running the CLI

Syntax: single-file <url> [output] [options ...]<br/> Show help: single-file --help<br/> Examples:

Save a page to a specific file: single-file https://www.wikipedia.org wikipedia.html Save URLs listed in a file: single-file --urls-file=list-urls.txt Integration with user scripts : You can run custom scripts before or after the page is saved. Enable the feature by setting userScriptEnabled: true in the extension’s JSON options or by passing --browser-script to the CLI. Example scripts can dispatch custom events such as single-file-user-script-init, listen for single-file-on-before-capture-request to modify the DOM before capture, and listen for single-file-on-after-capture-request to restore changes after capture.

(() => {
  const elements = new Map();
  const removedElementsSelector = "img";
  dispatchEvent(new CustomEvent("single-file-user-script-init"));
  addEventListener("single-file-on-before-capture-request", () => {
    document.querySelectorAll(removedElementsSelector).forEach(element => {
      const placeHolderElement = document.createElement(element.tagName);
      elements.set(placeHolderElement, element);
      element.parentElement.replaceChild(placeHolderElement, element);
    });
  });
  addEventListener("single-file-on-after-capture-request", () => {
    Array.from(elements).forEach(([placeHolderElement, element]) => {
      placeHolderElement.parentElement.replaceChild(element, placeHolderElement);
    });
    elements.clear();
  });
})();