javascript - 我们可以用 chrome.downloads.download 完整地下载一个网页吗？ (谷歌浏览器扩展程序)

Question

我想从我的 Google Chrome 扩展程序中完全保存一个网页。我添加了 "downloads", "<all_urls>"权限并确认以下代码将 Google 页面保存到 google.html .

  chrome.downloads.download(
            { url: "http://www.google.com",
              filename: "google.html" },
            function (x) { console.log(x); })

但是，这段代码只保存了html文件。不保存样式表、脚本和图像。我想完整保存网页，就好像我保存页面有对话框一样，选择Format: Webpage, Complete .

我查看了 document但我找不到办法。

所以我的问题是:如何使用 Google Chrome 的 api 从扩展程序完全下载网页？

Answer 1

下载 API 仅下载单个资源。如果要保存完整的网页，则可以先打开网页，然后使用 chrome.pageCapture.saveAsMHTML 将其导出为 MHTML。 ，使用 URL.createObjectURL 为导出的 Blob 创建一个 blob:-URL，最后使用 chrome.downloads.download 保存这个 URL API。

pageCapture API 需要一个有效的 tabId。例如:

// Create new tab, wait until it is loaded and save the page
chrome.tabs.create({
    url: 'http://example.com'
}, function(tab) {
    chrome.tabs.onUpdated.addListener(function func(tabId, changeInfo) {
        if (tabId == tab.id && changeInfo.status == 'complete') {
            chrome.tabs.onUpdated.removeListener(func);
            savePage(tabId);
        }
    });
});

function savePage(tabId) {
    chrome.pageCapture.saveAsMHTML({
        tabId: tabId
    }, function(blob) {
        var url = URL.createObjectURL(blob);
        // Optional: chrome.tabs.remove(tabId); // to close the tab
        chrome.downloads.download({
            url: url,
            filename: 'whatever.mhtml'
        });
    });
}

要尝试，将前面的代码放在background.js中，
将权限添加到 manifest.json(如下所示)并重新加载扩展。然后会打开example.com，网页会保存为一个自包含的MHTML文件。

{
    "name": "Save full web page",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "pageCapture",
        "downloads"
    ]
}