我想使用Chrome扩展程序下载当前页面的DOM。我不知道为什么,但是当我进行下载时,结果只是一个带有'null'或'undefined'的文本文件,而不是DOM。我试图从吸收知识在这里和这里,但我似乎无法从得到消息content.js
通过对popup.js
。
另外,我不确定为什么这确实起作用。当我阅读文档时,似乎我需要通过选择活动标签将消息从发送popup.js
至content.js
:
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {message: 'getMessageFromContent'}, function(response) {
//Code to handle response from content.js
}
});
我当前的代码:
content.js
var page_html = DOMtoString(document);
chrome.runtime.sendMessage({method: 'downloadPageDOM', pageDOM: thisPage});
function DOMtoString(document_root) { ... }
background.js
chrome.tabs.query({currentWindow: true, active: true}, function(tab) {
var page_html;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message == 'downloadPageDOM')
page_html = request.pageDOM;
else if (request.message == 'getPageDOM')
sendResponse(page_html);
});
});
popup.js
document.addEventListener('DOMContentLoaded', function() {
var download_button = document.getElementById('download_button');
download_button.addEventListener('click', function() {
chrome.runtime.sendMessage({message:'getPageDOM'}, function(response) {
download(response, "download.html", "text/html");
});
});
});
function download(data, fileName, mimeType) { ... }
我觉得我对消息传递的工作方式缺少关键的了解。如果有人可以帮助我理解为什么下载的文件只是“ null”,我将不胜感激。
您过于复杂了,这会导致很多逻辑错误。
您已将后台页面设置为充当消息代理,并且内容脚本本身触发更新page_html
变量。然后,弹出窗口会用另一条消息提取该数据。
请注意,在任何情况下page_html
都不会包含当前标签页的数据:您正在使用最后加载的标签页覆盖此数据。
您可以做的是完全切掉中间人(即background.js
)。我猜您对向弹出窗口发送消息通常是个坏主意(不保证它是打开的)的事实感到困惑,但是反过来通常是安全的(您可以使其始终保持安全)。
您的应用程序的逻辑是:一旦用户点击该按钮,创建快照的那一刻。因此,与其让您的内容脚本立即执行工作,不如添加一个消息侦听器:
// content.js
chrome.runtime.onMessage(function(message, sender, sendResponse) {
else if (request.message == 'getPageDOM')
sendResponse(DOMtoString(document));
});
function DOMtoString(document_root) { ... }
并在弹出窗口中请求它:
// popup.js
// (Inside the click listener)
chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
// Note that sending a message to a content script is different
chrome.tabs.sendMessage(tabs[0].id, {message:'getPageDOM'}, function(response) {
download(response, "download.html", "text/html");
});
});
但是,此解决方案并非100%可靠。如果内容脚本未注入到页面中,它将失败(并且可能发生)。但是有可能解决这个问题。
我们不假设内容脚本已注入。实际上,大多数情况下,仅当用户单击您的按钮时,您才不需要自动注入它。
因此,从清单中删除内容脚本,确保您具有主机许可权("<all_urls>"
尽管考虑了activeTab
许可权也可以正常工作),并使用编程注入。
有一种很少使用的程序注入形式,它收集最后执行的语句的值。我们将使用它。
// content.js
DOMtoString(document); // This will be the last executed statement
function DOMtoString(document_root) { ... }
在弹出窗口中,执行脚本,收集结果:
// popup.js
// (Inside the click listener)
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "content.js"}, function(data) {
// Data is an array of values, in case it was executed in multiple tabs/frames
download(data[0], "download.html", "text/html");
});
});
注意:以上所有均假设您的功能DOMtoString
确实有效。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句