How to integrate the API of SingleFile into an extension

1. Copy from SingleFile the lib folder, the extension/index.js file and the extension/lib folder.
2. Create a manifest.json file containing the content below.

{
  ...
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start",
      "js": [
        "lib/single-file/index.js",
        "extension/index.js",
        "extension/lib/single-file/index.js",
        "extension/lib/single-file/browser-polyfill/chrome-browser-polyfill.js",
        "lib/single-file/single-file-helper.js",
        "lib/single-file/processors/hooks/content/content-hooks-frames.js",
        "lib/single-file/processors/frame-tree/content/content-frame-tree.js"
      ],
      "all_frames": true,
      "match_about_blank": true
    },
    {
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start",
      "js": [
        "lib/single-file/index.js",
        "lib/single-file/processors/hooks/content/content-hooks.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "lib/single-file/index.js",
      "extension/index.js",
      "extension/lib/single-file/index.js",
      "extension/lib/single-file/browser-polyfill/chrome-browser-polyfill.js",
      "extension/lib/single-file/core/bg/scripts.js",
      "extension/lib/single-file/fetch/bg/fetch.js",
      "extension/lib/single-file/frame-tree/bg/frame-tree.js",
      "extension/lib/single-file/lazy/bg/lazy-timeout.js"
    ],
    "persistent": false
  },
  "web_accessible_resources": [
    "lib/single-file/processors/hooks/content/content-hooks-web.js",
    "lib/single-file/processors/hooks/content/content-hooks-frames-web.js"
  ],
  "permissions": [
    "activeTab",
    "<all_urls>"
  ]
}

3. Inject SingleFile in the tab to save by executing the code below in a background script.

await singlefile.extension.lib.injectScript(tabId, options);

• arguments
  • tabId is the id of the Tab where to inject SingleFile
  • options is an object containing the options to pass to SingleFile. The default values can be found in the extension/core/bg/config.js file.
• return
  • A promise which is resolved once SingleFile is injected

4. 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 singlefile.extension.lib.getPageData(options);

• 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)

5. Notes

• If your project already includes a polyfill of the API for WebExtensions for Chromium-based browsers then you can omit the extension/lib/single-file/browser-polyfill/chrome-browser-polyfill.js scripts in the manifest.json file.