Chrome extension - get source code, errors on 404 objects in source code

Question

I'm building a Chrome Extension that creates a new tab, loads a page, retrieve the source code and closes the tab. It's my first Chrome Extension.

The whole process works more or less, it needs fine tuning but when I retrieve pages where some objects are not found like missing images for example, my console returns error messages while I don't execute or display the source code in my console.

The function I'm using is the following:

function chromeTabsCreateAsync(createProperties) 
{
    return new Promise((resolve, reject) => 
        {
            console.log('tab start');
            chrome.tabs.create(createProperties, tab => 
                {
                    if (chrome.runtime.lastError) 
                        {
                            reject(new Error(chrome.runtime.lastError));
                        } 
                    else 
                        {

                        chrome.tabs.onUpdated.addListener(onUpdated);
                        function onUpdated(updatedTabId, details) 
                            {
                                    console.log(details.status+' '+tab.id);
                                    if (details.status == 'complete') 
                                        {

                                            chrome.tabs.executeScript(tab.id, 
                                                {
                                                    file: 'test.js',

                                                }, function(results) 
                                                {

                                                    var source = results[0];

                                                    chrome.tabs.remove(tab.id); 
                                                    resolve(source);
                                                });

                                        }
                            }
                        }

                });
            console.log('tab end'); 
        });
}

The variable "source" contains the source code but when it contains something missing, I get errors like this one in my console:

GET chrome-extension://kcaijhlimdglmbpdmgmjdclklhppafge/WEB/images/max_chatbot.png net::ERR_FILE_NOT_FOUND

This PNG is indeed called from the source code of the page and it's indeed missing from that page but why does my console throw that error while the source code is inside a variable ?

Am I doing something wrong?

Thanks

Laurent

Answer 1

The solution consists in creating a new document to store the source code:

parser = new DOMParser();
content = parser.parseFromString(source, "text/html");

source contains the source code retrieved with the script showed here above.

if you want to access the content of one particular div:

$('.divClass',content).contents();