Obtenir le code HTML source de la page courante à partir de l'extension chrome

Question

Obtenir le code HTML source de la page courante à partir de l'extension chrome

Demandé el 27 de Juillet, 2012: Quand la question a-t-elle été
120502 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une extension chrome. J'ai besoin d'analyser la source HTML de la page en cours. J'ai trouvé ici toutes sortes de solutions avec des pages de fond et des scripts de contenu mais aucune ne m'a aidé. voici ce que j'ai jusqu'à présent :

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

L'alerte est toujours indéfinie, même si je modifie la fonction de rappel dans le fichier content.js :

callback('hello');

Toujours le même résultat. Qu'est-ce que je fais de travers ? Peut-être que je m'y prends de la mauvaise façon. Ce dont j'ai vraiment besoin est ceci : Lorsque l'utilisateur ouvre la popup d'extension (et seulement à ce moment-là), j'ai besoin du HTML de la page actuelle pour pouvoir l'analyser.

Demandé el 27 de Juillet, 2012 par Mr T.

Answer 1

2 Réponses

Answer 2

165voto

PAEz Points 4174

Injectez un script dans la page dont vous voulez obtenir la source et envoyez-le à la popup.....

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

Répondu el 27 de Juillet, 2012 par PAEz (4174 Points )

Answer 3

1voto

Dejan S Points 75

Voici ma solution :

chrome.runtime.onMessage.addListener(function(request, sender) {
        if (request.action == "getSource") {
            this.pageSource = request.source;
            var title = this.pageSource.match(/<title[^>]*>([^<]+)<\/title>/)[1];
            alert(title)
        }
    });

    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
        chrome.tabs.executeScript(
            tabs[0].id,
            { code: 'var s = document.documentElement.outerHTML; chrome.runtime.sendMessage({action: "getSource", source: s});' }
        );
    });

Répondu el 14 de Novembre, 2020 par Dejan S (75 Points )

Obtenir le code HTML source de la page courante à partir de l'extension chrome

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Obtenir le code HTML source de la page courante à partir de l'extension chrome

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: