Obteniendo el código fuente de HTML de la página actual desde la extensión de cromo

Tengo una extensión de cromo. Necesito analizar desde la fuente HTML de la página actual. Encontré aquí todo tipo de soluciones con páginas de fondo y scripts de contenido, pero ninguno me ayudó. Esto es lo que tengo hasta ahora:
manifest.json:Obteniendo el código fuente de HTML de la página actual desde la extensión de cromo

{ 
    "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); 
    } 
});

La alerta siempre alerta indefinido. incluso si cambio en el archivo content.js la función de devolución de llamada a:

callback('hello');

sigue el mismo resultado. ¿Qué estoy haciendo mal? tal vez estoy yendo en esto de la manera incorrecta. lo que realmente necesito es esto. Cuando el usuario abre la ventana emergente de extensión (y solo entonces), necesito HTML de la página actual para poder analizarlo. ¿alguna sugerencia?

Fuente

2012-07-27 Mr T.

Un problema es que el código en su página de fondo se ejecuta inmediatamente (antes se inyectan los guiones de contenido). Una pregunta muy similar/duplicada se ha hecho antes; Eche un vistazo a la respuesta en [Abra una nueva pestaña de Google Chrome y obtenga la fuente] (http://stackoverflow.com/a/10162291/938089?open-a-new-google-chrome-tab-and-get- la fuente). –

Gracias por su respuesta robar. Copié los segmentos del código en el enlace adjunto, pero todavía no funciona. El problema es que mi extensión es una ventana emergente y necesito obtener el HTML solo cuando el usuario abre mi extensión. por ejemplo, si la pestaña actual es facebook.com, solo cuando abra mi extensión, recuperaré la fuente html en mi archivo js (no el script de contenido o la página de fondo). –

Actualiza tu pregunta con tu código actual. El código debe contener comentarios que resalten el problema. –

111

Inyectar una secuencia de comandos en la página que desea obtener el código fuente y el mensaje de nuevo a la ventana emergente ....

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) 
});

Fuente

2012-07-27 21:54:20 PAEz

@Gil Tankus. Lo siento por mi primera publicación, no presté suficiente atención a los comentarios (nuevamente) y acabé por regurgitar lo que dijo Rob W. La nueva publicación debería tener lo que querías. – PAEz

Gracias, su respuesta fue realmente útil, mi problema es que on on message ocurre de forma asíncrona. en mi ventana emergente, tengo todo tipo de otras cosas que transmiten en el código fuente HTML. ¿Cómo puedo guardar la fuente en una var global y solo luego continuar con la función onload de la página? –

No creo que puedas. Tu va a tener que ponerlo en el código de devolución de llamada o en una función y llamar a eso en la devolución de llamada ... si solo JS tuviera un comando 'goto' ¿sí? ; P – PAEz

Obteniendo el código fuente de HTML de la página actual desde la extensión de cromo

Respuesta

Cuestiones relacionadas