How to integrate the API of SingleFile Lite into an extension

1. Create a manifest.json file containing the content below. Copy the JavaScript files from the lib folder present in the manifest.

{
  ...
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start",
      "js": [
        "lib/chrome-browser-polyfill.js",
        "lib/single-file-frames.js",
        "lib/single-file-extension-frames.js"
      ],
      "all_frames": true,
      "match_about_blank": true,
      "match_origin_as_fallback": true
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start",
      "js": [
        "lib/single-file-hooks-frames.js"
      ],
      "all_frames": true,
      "match_about_blank": true,
      "match_origin_as_fallback": true,
      "world": "MAIN"
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start",
      "js": [
        "lib/chrome-browser-polyfill.js",
        "lib/single-file-bootstrap.js",
        "lib/single-file.js", // can be injected later with `chrome.scripting.executeScript`
        "lib/single-file-extension-core.js" // can be injected later with `chrome.scripting.executeScript`
      ]
    }
  ],
  "background": {
    "service_worker": "/lib/single-file-background.js"
  },
  "web_accessible_resources": [
    {
      "matches": [
        "<all_urls>"
      ],
      "resources": [
        "lib/single-file-hooks-frames.js",
        "lib/single-file-zip.min.js",
        "lib/single-file-z-worker.js"
      ]
    }
  ],
  "permissions": [
    "activeTab",
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

2. You can replace /lib/single-file-background.js with your background script and import /lib/single-file-background.js in your script.

3. Capture the page by executing the code below in the content script of the tab where SingleFile has been injected.

const { content, title, filename } = await extension.getPageData({
  removeHiddenElements: true,
  removeUnusedStyles: true,
  removeUnusedFonts: true,
  removeImports: true,
  blockScripts: true,
  blockAudios: true,
  blockVideos: true,
  compressHTML: true,
  removeAlternativeFonts: true,
  removeAlternativeMedias: true,
  removeAlternativeImages: true,
  groupDuplicateImages: true
});

• arguments
  • options is an object containing the options to pass to SingleFile.
• return
  • A promise which is resolved to an object containing the following properties:
    • content: HTML content of the page
    • title: tile of the page
    • filename: filename (if the option filenameTemplate is defined)