I want to save a wabpage pletely from my Google Chrome extension. I added "downloads", "<all_urls>" permissions and confirmed that the following code save the Google page to google.html.

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

However, this code only saves the html file. Stylesheets, scripts and images are not be saved. I want to save the webpage pletely, as if I save the page with the dialog, selecting Format: Webpage, Complete.

I looked into the document but I couldn't find a way.

So my question is: how can I download a webpage pletely from an extension using the api(s) of Google Chrome?

I want to save a wabpage pletely from my Google Chrome extension. I added "downloads", "<all_urls>" permissions and confirmed that the following code save the Google page to google.html.

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

However, this code only saves the html file. Stylesheets, scripts and images are not be saved. I want to save the webpage pletely, as if I save the page with the dialog, selecting Format: Webpage, Complete.

I looked into the document but I couldn't find a way.

So my question is: how can I download a webpage pletely from an extension using the api(s) of Google Chrome?

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Jul 10, 2014 at 8:57 itchyny asked Jul 10, 2014 at 8:50 itchynyitchyny 82422 gold badges99 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

The downloads API downloads a single resource only. If you want to save a plete web page, then you can first open the web page, then export it as MHTML using chrome.pageCapture.saveAsMHTML, create a blob:-URL for the exported Blob using URL.createObjectURL and finally save this URL using the chrome.downloads.download API.

The pageCapture API requires a valid tabId. For instance:

// Create new tab, wait until it is loaded and save the page
chrome.tabs.create({
    url: 'http://example.'
}, function(tab) {
    chrome.tabs.onUpdated.addListener(function func(tabId, changeInfo) {
        if (tabId == tab.id && changeInfo.status == 'plete') {
            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'
        });
    });
}

To try out, put the previous code in background.js,
add the permissions to manifest.json (as shown below) and reload the extension. Then example. will be opened, and the web page will be saved as a self-contained MHTML file.

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

No, it does not download for you all files: images, js, css etc. You should use tools like HTTRACK.