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

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

• arguments
  • tabId is a Tab id
  • 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 pageData = await singlefile.extension.getPageData(options);

• arguments
  • tabId is a Tab id
  • 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

• You can copy the lib folder, the extension/index.js file and the extension/lib folder in a sub-directory of your project, e.g. lib/singlefile/. In this case, set the option basePath to lib/singlefile/ when calling singlefile.extension.injectScript.
• If your project already includes a polyfill of the API for WebExtensions for Chromium-based browsers then you can omit the extension/lib/browser-polyfill/chrome-browser-polyfill.js scripts in the manifest.json file.