首页 文章

从chrome扩展获取当前页面的源HTML

提问于
浏览
65

我有一个chrome扩展名 . 我需要从当前页面的HTML源代码进行分析 . 我在这里找到了各种带有背景页面和内容脚本的解决方案,但没有人帮助我 . 这是我到目前为止:
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);
    }
});

警报始终警告未定义 . 即使我在content.js文件中将回调函数更改为:

callback('hello');

结果仍然相同 . 我究竟做错了什么?也许我正以错误的方式前进 . 我真的需要的是这个 . 当用户打开扩展弹出窗口时(仅此时),我需要当前页面的HTML,以便我可以分析它 . 有什么建议?

1 回答

  • 123

    将脚本注入要从中获取源的页面并将其发送回弹出窗口....

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

相关问题