Javascript 在Chrome扩展弹出窗口中获取DOM？

我正在尝试创建一个Chrome扩展，在弹出窗口中显示当前页面的DOM

作为热身，我尝试在

getBackgroundPage（）.dummy

中放入一个字符串，这个对

popup.js

脚本可见。但是，当我尝试在

getBackgroundPage（）.domContent

中保存DOM时，popup.js将其视为

未定义

你知道这里出了什么问题吗

我看了一下，但我不太明白如何将那篇文章中的教训用于我的代码


代码：

background.js

chrome.extension.getBackgroundPage().dummy = "yo dummy"; 

function doStuffWithDOM(domContent) {
    //console.log("I received the following DOM content:\n" + domContent);
    alert("I received the following DOM content:\n" + domContent);
    //theDomContent = domContent;
    chrome.extension.getBackgroundPage().domContent = domContent;
}

chrome.tabs.onUpdated.addListener(function (tab) {
    //communicate with content.js, get the DOM back...
    chrome.tabs.sendMessage(tab.id, { text: "report_back" }, doStuffWithDOM); //FIXME (doesnt seem to get into doStuffWithDOM)
});

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == "report_back")) {
        /* Call the specified callback, passing 
           the web-pages DOM content as argument */

        //alert("hi from content script"); //DOESN'T WORK ... do we ever get in here?
        sendResponse(document.all[0].outerHTML);
    }
});

document.write(chrome.extension.getBackgroundPage().dummy); //WORKS.
document.write(chrome.extension.getBackgroundPage().domContent); //FIXME (shows "undefined")

chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
    if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
        chrome.tabs.sendMessage(tab.id, { text: "report_back" },function(response){
           doStuffWithDOM(response);
        });
    }
})

content.js

chrome.extension.getBackgroundPage().dummy = "yo dummy"; 

function doStuffWithDOM(domContent) {
    //console.log("I received the following DOM content:\n" + domContent);
    alert("I received the following DOM content:\n" + domContent);
    //theDomContent = domContent;
    chrome.extension.getBackgroundPage().domContent = domContent;
}

chrome.tabs.onUpdated.addListener(function (tab) {
    //communicate with content.js, get the DOM back...
    chrome.tabs.sendMessage(tab.id, { text: "report_back" }, doStuffWithDOM); //FIXME (doesnt seem to get into doStuffWithDOM)
});

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == "report_back")) {
        /* Call the specified callback, passing 
           the web-pages DOM content as argument */

        //alert("hi from content script"); //DOESN'T WORK ... do we ever get in here?
        sendResponse(document.all[0].outerHTML);
    }
});

document.write(chrome.extension.getBackgroundPage().dummy); //WORKS.
document.write(chrome.extension.getBackgroundPage().domContent); //FIXME (shows "undefined")

chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
    if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
        chrome.tabs.sendMessage(tab.id, { text: "report_back" },function(response){
           doStuffWithDOM(response);
        });
    }
})

popup.js

chrome.extension.getBackgroundPage().dummy = "yo dummy"; 

function doStuffWithDOM(domContent) {
    //console.log("I received the following DOM content:\n" + domContent);
    alert("I received the following DOM content:\n" + domContent);
    //theDomContent = domContent;
    chrome.extension.getBackgroundPage().domContent = domContent;
}

chrome.tabs.onUpdated.addListener(function (tab) {
    //communicate with content.js, get the DOM back...
    chrome.tabs.sendMessage(tab.id, { text: "report_back" }, doStuffWithDOM); //FIXME (doesnt seem to get into doStuffWithDOM)
});

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == "report_back")) {
        /* Call the specified callback, passing 
           the web-pages DOM content as argument */

        //alert("hi from content script"); //DOESN'T WORK ... do we ever get in here?
        sendResponse(document.all[0].outerHTML);
    }
});

document.write(chrome.extension.getBackgroundPage().dummy); //WORKS.
document.write(chrome.extension.getBackgroundPage().domContent); //FIXME (shows "undefined")

chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
    if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
        chrome.tabs.sendMessage(tab.id, { text: "report_back" },function(response){
           doStuffWithDOM(response);
        });
    }
})

popup.html

<!doctype html>
<html>
  <head>
    <title>My popup that should display the DOM</title>       
    <script src="popup.js"></script>
  </head>
</html>


应该显示DOM的我的弹出窗口

manifest.json

{
"manifest_version": 2,
"name":    "Get HTML example w/ popup",
"version": "0.0",

"background": {
    "persistent": false,
    "scripts": ["background.js"]
},
"content_scripts": [{
    "matches": ["<all_urls>"],
    "js":      ["content.js"]
}],
"browser_action": {
    "default_title": "Get HTML example",
    "default_popup": "popup.html"
},

"permissions": ["tabs"]
}

{
“清单版本”：2，
“名称”：“获取带有弹出窗口的HTML示例”，
“版本”：“0.0”，
“背景”：{
“坚持”：假，
“脚本”：[“background.js”]
},
“内容脚本”：[{
“匹配项”：[“”]，
“js”：[“content.js”]
}],
“浏览器操作”：{
“默认标题”：“获取HTML示例”，
“默认弹出窗口”：“popup.html”
},
“权限”：[“选项卡”]
}
更新的
chrome.tabs.on语法错误

在background.js中

chrome.extension.getBackgroundPage().dummy = "yo dummy"; 

function doStuffWithDOM(domContent) {
    //console.log("I received the following DOM content:\n" + domContent);
    alert("I received the following DOM content:\n" + domContent);
    //theDomContent = domContent;
    chrome.extension.getBackgroundPage().domContent = domContent;
}

chrome.tabs.onUpdated.addListener(function (tab) {
    //communicate with content.js, get the DOM back...
    chrome.tabs.sendMessage(tab.id, { text: "report_back" }, doStuffWithDOM); //FIXME (doesnt seem to get into doStuffWithDOM)
});

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == "report_back")) {
        /* Call the specified callback, passing 
           the web-pages DOM content as argument */

        //alert("hi from content script"); //DOESN'T WORK ... do we ever get in here?
        sendResponse(document.all[0].outerHTML);
    }
});

document.write(chrome.extension.getBackgroundPage().dummy); //WORKS.
document.write(chrome.extension.getBackgroundPage().domContent); //FIXME (shows "undefined")

chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
    if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
        chrome.tabs.sendMessage(tab.id, { text: "report_back" },function(response){
           doStuffWithDOM(response);
        });
    }
})