Question

javascript新手并决定尝试使用Chrome扩展程序。我试图将items数组传递到我的html文件中，但它在我的chrome扩展程序的html中显示为未定义。这可以从按钮/弹出窗口js文件到本地html文件吗？这就是我所拥有的：

的manifest.json

{
  "manifest_version": 2,
  "name": "Testing",
  "short_name": "Testing",
  "version": "1",
  "browser_action": {
    "default_popup": "./button.html"
  },
  "permissions": [
    "activeTab",
    "<all_urls>"
  ]
}

Popup.js

var items = {};
var type = ["1","2","3"];
type.forEach(function(type,index){
    //code to store stuff into items array
}
console.dir(items) //shows everything was stored correctly

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.action == "getData") {
        sendResponse(items);
    }
    return true;
});

chrome.tabs.create({url: './hello.html', selected:true});

hello.html的

<!doctype html>
<html lang="en">
<head>
    <script src="./pasteData.js"></script>
</head>
<body>
<p id="target">PARAGRAPH</p>
</body>
</html>

pasteData.js

function getData() {
    chrome.runtime.sendMessage({"action": "getData"}, function(data) {
        document.getElementById("target").innerHTML = data;
    });
};

window.onload = function() {
    document.querySelector('button').onclick = function(e) {
        e.preventDefault();
        getData();
    };
};

Answer 1

document.querySelector('button')将一无所获，请使用document.querySelector('p')或document.querySelector('#target')
创建hello.html时，popup.html已关闭，因此当您致电chrome.runtime.sendMessage发送消息时，实际上此消息频道的另一端根本未打开。这就是您在回调中获得undefined的原因，您可以尝试将此message passing逻辑从popup.js移至Event page或使用类似chrome.storage的内容

将对象从popup.js发送到本地html页面

1 个答案: