无法在Chrome扩展程序中设置空的属性'innerHTML' - 从内容到后台的消息再到弹出窗口

Question

我正在开发一个小型chrome扩展，目前无法在弹出窗口中显示从代码中收集的一些信息。从我的其他功能中收集的信息可以很好地显示，但由于某种原因，我必须使用内容脚本来获取信息，并将其发送到后台脚本来显示，我无法使其工作。收到消息后，该消息将正确显示在控制台中。当我尝试用测试字符串修改目标段落的innerHTML时，它工作得很好。我也尝试过一堆不同顺序的变量和函数，但这似乎一点都不重要。有人能帮我吗？

contentscript.js

function messageBackground(e) {
var arr = secHeaders();
console.log(arr)
var sending = chrome.runtime.sendMessage({
headers: arr
})
}
messageBackground();

background.js

var secHeaders = [];
$(document).ready(function(){
httpChecker();
cookieControl();
sslTest();
document.getElementById("secHeaderA").innerHTML = secHeaders;
}
function handleMessage(request, sender) {
console.log("message from content script:   " + request.headers);
secHeaders = request.headers;
}
chrome.runtime.onMessage.addListener(handleMessage);

编辑：

manifest.json

{
"manifest_version": 2,
"name": "Security Analysis Extension",
"version": "0.001",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"run_at": "document_start",
"js": ["content.js"]
}
],
"background": {
"scripts": ["blocked_domains.js", "jquery-3.4.1.min.js", "background.js"]
},
"browser_action": {
"default_icon": "extension_icon.png",
"default_title": "Security Analysis Extension",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"activeTab",
"cookies",
"webRequest",
"<all_urls>"
],
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
"web_accessible_resources": [
"background.js"
]
}

Answer 1

收到消息时，是否可以尝试附加到文档中？

function handleMessage(request, sender) {
console.log("message from content script:   " + request.headers);
document.getElementById("secHeaderA").innerHTML = request.headers;
}

通常情况下，当background.js加载时，$(document).ready(function(){将立即运行。如果尚未调用handleMessage，并且设置了secHeaders，则innerHTML将设置为空数组。

另一个问题可能是secHeaders不包含有效的HMTL字符串。也许可以尝试将secHeaders转换为JSON字符串并检查输出：

document.getElementById("secHeaderA").innerText = JSON.stringify(secHeaders);