Best IT Recipes

Open a new Google Chrome tab and get the source

I am developing a Google Chrome extension and I would like to know how to open a new tab (well, this is simple: chrome.tabs.create({'url': chrome.extension.getURL(mypage)}, function(tab) { /* ... */ }); ) and get the source code of this page.

I know that I can use AJAX to get the source, but the problem is that the webpage contains some Javascript code that edits the page and I need an edited page.

Is it possible?

+1
javascript ajax google-chrome-extension
Apr 15 '12 at 9:59
source share
1 answer

To serialize a complete, live HTML document, use the following code:

 // @author Rob W <http://stackoverflow.com/users/938089/rob-w> // Demo: var serialized_html = DOMtoString(document); function DOMtoString(document_root) { var html = '', node = document_root.firstChild; while (node) { switch (node.nodeType) { case Node.ELEMENT_NODE: html += node.outerHTML; break; case Node.TEXT_NODE: html += node.nodeValue; break; case Node.CDATA_SECTION_NODE: html += '<![CDATA[' + node.nodeValue + ']]>'; break; case Node.COMMENT_NODE: html += '<!--' + node.nodeValue + '-->'; break; case Node.DOCUMENT_TYPE_NODE: // (X)HTML documents are identified by public identifiers html += "<!DOCTYPE " + node.name + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') + (!node.publicId && node.systemId ? ' SYSTEM' : '') + (node.systemId ? ' "' + node.systemId + '"' : '') + '>\n'; break; } node = node.nextSibling; } return html; }

Now, in the Chrome extension, you need to add some events to the extension page, such as a help page or a pop-up page:

 /** * Get the HTML source for the main frame of a given tab. * * @param {integer} tabId - ID of tab. * @param {function} callback - Called with the tab source upon completion. */ function getSourceFromTab(tabId, callback) { // Capture the page when it has fully loaded. // When we know the tab, execute the content script chrome.tabs.onUpdated.addListener(onUpdated); chrome.tabs.onRemoved.addListener(onRemoved); function onUpdated(updatedTabId, details) { if (details.status == 'complete') { removeListeners(); chrome.tabs.executeScript(tabId, { file: 'get_source.js' }, function(results) { // TODO: Detect injection error using chrome.runtime.lastError var source = results[0]; done(source); }); } } function removeListeners() { chrome.tabs.onUpdated.removeListener(onUpdated); chrome.tabs.onRemoved.removeListener(onRemoved); } function onRemoved() { removeListeners(); callback(''); // Tab closed, no response. } }

The above function returns the source code of the main frame in the tab. If you want to get the source of the child frame, call chrome.tabs.executeScript with the frameId parameter.

The following snippet shows an example of how your extension can use this function. Paste the snippet into the background page or declare a browserAction , place the snippet in the onClicked and click the extension button.

 var mypage = 'https://example.com'; var callback = function(html_string) { console.log('HTML string, from extension: ', html_string); }; chrome.tabs.create({ url: mypage }, function(tab) { getSourceFromTab(tab.id, callback); });

The get_source.js link contains the following code:

 function DOMtoString(document_root) { ... see top of the answer... } // The value of the last expression of the content script is passed // to the chrome.tabs.executeScript callback DOMtoString(document);

Remember to add the appropriate host permissions so you can read the DOM from the page. In the above example, you need to add "https://example.com/*" to the "Permissions" section of manifest.json.

Related Documentation

+5
Apr 15 2018-12-12T00:
source share


More articles:


All Articles