I have a chrome extension. I need to analyse from the HTML source of the current page. I found here all kinds of solutions with background pages and content scripts but none helped me. here is what I have so far:
manifest.json
{ "name": "Extension", "version": "1.0", "description": "Extension", "browser_action": { "default_icon": "bmarkred.ico", "popup": "Test.html" }, "content_scripts": [ { "matches": ["http://*/*"], "js": ["content.js"] } ], "background": { "page": "backgroundPage.html" }, "permissions": [ "cookies", "tabs", "http://*/*", "https://*/*" ] }
background.html
<html> <head> <script type="text/javascript"> try { chrome.tabs.getSelected(null, function (tab) { chrome.tabs.sendRequest(tab.id, {action: "getSource"}, function(source) { alert(source); }); }); } catch (ex) { alert(ex); } </script> </head> </html>
content.js
chrome.extension.onRequest.addListener(function(request, sender, callback) { if (request.action == "getSource") { callback(document.getElementsByTagName('html')[0].innerHTML); } });
The alert always alerts undefined. even if i change in the content.js file the callback function to:
callback('hello');
still the same result. What am I doing wrong? maybe I'm going at this the wrong way. What I really need is this: When the user opens the extension popup (and only then), I need HTML of the current page so I can analyse it.
To view only the source code, press the shortcut keys Ctrl + U on your computer's keyboard. Right-click a blank part of the web page and select View page source from the pop-up menu that appears.
When the page loads, click on the CRX icon in the extensions bar in Chrome and select “View source.” 4. You should be able to see the selected extension's source code in the Chrome window.
Inject a script into the page you want to get the source from and message it back to the popup....
manifest.json
{ "name": "Get pages source", "version": "1.0", "manifest_version": 2, "description": "Get pages source from a popup", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": ["tabs", "<all_urls>"] }
popup.html
<!DOCTYPE html> <html style=''> <head> <script src='popup.js'></script> </head> <body style="width:400px;"> <div id='message'>Injecting Script....</div> </body> </html>
popup.js
chrome.runtime.onMessage.addListener(function(request, sender) { if (request.action == "getSource") { message.innerText = request.source; } }); function onWindowLoad() { var message = document.querySelector('#message'); chrome.tabs.executeScript(null, { file: "getPagesSource.js" }, function() { // If you try and inject into an extensions page or the webstore/NTP you'll get an error if (chrome.runtime.lastError) { message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message; } }); } window.onload = onWindowLoad;
getPagesSource.js
// @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; } chrome.runtime.sendMessage({ action: "getSource", source: DOMtoString(document) });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With