javascript - 获取页面源chrome扩展

Question

我目前正在开发一个 Chrome 扩展程序，我必须在其中获取页面的 HTML 源代码。我目前使用 Chrome 消息传递。这是我的源代码:

背景.js

chrome.webNavigation.onComplete.addListener(function(e) {
        chrome.tabs.sendRequest(e.tabId, {
            action: 'getSource'
        }, function(r) {
            console.log(r);
        });
});

contentscript.js

chrome.extension.onRequest.addListener(function(request, sender, callback) {
    if (request.action == 'getSource')
        callback(document.documentElement.outerHTML);
});

速度非常慢，因为我必须等待页面中的所有数据(如图像、javascript 等)都被下载才能获取页面的源代码。

还有另一种方法可以制作类似的东西吗？谢谢。

Answer 1

将等待逻辑移至 list 中:
→ 设置run_at将 list 文件中的内容脚本属性添加到 document_end。

这将在加载 DOM 之后但在加载任何子资源(例如图像)之前运行内容脚本。

In the case of "document_end", the files are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.

— Google documentation

在您的内容脚本中，将 HTML 直接发送到您的后台脚本:

var html = document.documentElement.outerHTML;
chrome.extension.sendMessage(null, html);

但请注意，页面中注入(inject)的 JavaScript 可能会修改 HTML，因此您最终可能会得到与浏览器中不同的 HTML。