Question

I am currently developing a Chrome extension in which I have to get the HTML source of a page. I currently use Chrome Messaging. Here is my source code :

background.js

chrome.webNavigation.onComplete.addListener(function(e) {
        chrome.tabs.sendRequest(e.tabId, {
            action: 'getSource'
        }, function(r) {
            console.log(r);
        });
});

contentscript.js

chrome.extension.onRequest.addListener(function(request, sender, callback) {
    if (request.action == 'getSource')
        callback(document.documentElement.outerHTML);
});

It’s pretty slow because I have to wait that every data (like image, javascript, etc.) in the page have been downloaded to get the source of the page.

Is it another way to make something like that ? Thank you.

Answer 1

Move the wait logic to your manifest:
→ Set the run_at property of your content script in your manifest file to document_end.

This will run the content script after the DOM was loaded but before any subresources (e.g. images) are loaded.

In the case of “document_end”, the files are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.

— Google documentation

In your contentscript, send the HTML directly the your background script:

var html = document.documentElement.outerHTML;
chrome.extension.sendMessage(null, html);

But note that injected JavaScript in the page could modify the HTML thus you can end up with different HTML than you’ve got in your browser.