Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting the source HTML of the current page from chrome extension

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.

like image 530
Mr T. Avatar asked Jul 27 '12 08:07

Mr T.


People also ask

How can you view the source HTML code of a web page on Chrome?

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.

Can I see the source code of Chrome extension?

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.


1 Answers

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) }); 
like image 66
PAEz Avatar answered Sep 18 '22 05:09

PAEz