Skip to content

How to integrate SingleFile library code in "custom" environments?

Gildas edited this page Apr 28, 2022 · 30 revisions
  1. Execute the scripts below ideally before any other script (e.g. before the HTML document is parsed).

    • in the top window:

      • lib/single-file-bootstrap.js
    • in frames and the top window:

      • lib/single-file-frames.js
  2. Execute the script below in the top window, before saving the page.

    • lib/single-file.js
  3. Execute the script below in the top window to get the saved page. See here for more information about the syntax https://github.com/gildas-lormeau/SingleFile/wiki/How-to-integrate-the-API-of-SingleFile-into-an-extension.

const { content, title, filename } = await singlefile.getPageData({
  removeHiddenElements: true,
  removeUnusedStyles: true,
  removeUnusedFonts: true,
  removeImports: true,
  removeScripts: true,
  compressHTML: true,
  removeAudioSrc: true,
  removeVideoSrc: true,
  removeAlternativeFonts: true,
  removeAlternativeMedias: true,
  removeAlternativeImages: true,
  groupDuplicateImages: true
});
  1. In order to bypass CORS or other network security restrictions you can call singlefile.init() before calling singlefile.getPageData() and pass an object as parameter with a fetch property . The value of this property is a function which implements fetch. The function must accept a URL as first parameter and should support optional request headers passed as second parameter. The Response object returned asynchronously must support the properties status and headers, and the method arrayBuffer().

  2. Remember the code is under AGPL and that you must use the same license for your project if you want to integrate this code ;)

Clone this wiki locally