Question

我在这里完全不知所措。我想从Chrome中的标签中获取html内容。

的manifest.json

{
  "manifest_version": 2,
  "name": "Test",is a test.",
  "version": "1.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "background": {
      "scripts": ["main.js"],
      "persistent": false
  },
  "permissions": [
  "tabs",
  "https://www.google.com"
  ]
}

main.js

var timerObj = new Timer({'interval':5000});

chrome.runtime.onStartup.addListener(timerObj.start(mainF));

function mainF() {
    chrome.tabs.query( {} ,function (tabs) {
    for (var i = 0; i < tabs.length; i++) {
        var url = tabs[i].url;
        if (url != null) {
             console.log(tabs[i].url);
             //I want to get html source here
        }
    }
  });
};

function Timer( obj ){

为简洁起见，最后一行function Timer( obj ){被截断。 console.log(tabs[i].url);可供测试。对于每个标签，我希望获得html源代码。有了这个来源，我将解析标签和其他内容。我已经看到其他资源提到sendMessage和onMessage，但我并没有真正得到它。许多其他资源引用了已弃用的sendRequest和onRequest。

Answer 1

据我所知，有三种方法可以实现这一点。

chrome.tabs.executeScript。我们可以使用Programming Injection将内容脚本注入网页，在回调中我们可以获得返回的值。
Content Script和Message Passing。我们也可以manifest.json的方式注入内容脚本，然后使用chrome.runtime.sendMessage和chrome.runtime.onMessage来传输数据。
XMLHttpRequest。是的，这也是一种方式，我们可以直接在后台页面中进行ajax调用来获取网页的源代码，因为我们可以轻松获取网址。显然，与上述两种方法相比，我们需要启动另一个http请求，但这也是一种方式。

在下面的示例代码中，我只使用browserAction来触发事件，然后您可以通过注释掉其他两种方法并仅保留一个方法来切换不同的方法来获取网页的源代码。

的manifest.json

{
    "manifest_version": 2,
    "name": "Test is a test.",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ],
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    },
    "browser_action": {
        "default_title": "title"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

background.js

chrome.browserAction.onClicked.addListener(function () {
    chrome.tabs.query({}, function (tabs) {
        for (var i = 0; i < tabs.length; i++) {
            var id = tabs[i].id;
            var url = tabs[i].url;
            //method1(id);
            method2(id);
            //method3(url);
        }
    });
});

function method1(tabId) {
    chrome.tabs.executeScript(tabId, { "code": "document.documentElement.outerHTML;" }, function (result) {
        console.log(result);
    });
}

function method2(id) {
    chrome.tabs.sendMessage(id, {action: "getSource"}, function(response) {
        console.log(response.sourceCode);
    });
}

function method3(url) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        console.log(xhr.responseText);
    };
    xhr.open("GET", url);
    xhr.send();
}

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
    if(request.action === "getSource") {
        sendResponse({sourceCode: document.documentElement.outerHTML});
    }
});

从标签中获取HTML内容

1 个答案: