Невозможно установить свойство 'inner HTML' для null в расширении Chrome - сообщение из содержимого в фоновое, во всплывающее окно

Question

Я работаю над небольшим расширением chrome и в настоящее время застрял с отображением некоторой информации, собранной из кода во всплывающем окне. Информация, полученная от других моих функций, может отображаться нормально, но по какой-то причине для функции, в которой мне приходится использовать скрипт содержимого для получения информации и отправки ее в фоновый скрипт для ее отображения, я просто не могу заставить ее работать. Сообщение правильно отображается в консоли при получении. Когда я пытаюсь изменить внутренний HTML целевого абзаца с помощью тестовой строки, он работает нормально. Я также попробовал несколько различных типов переменных и функций, но это, похоже, не имеет значения. Кто-нибудь может мне помочь с этим?

содержание. js

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

messageBackground();

фон. 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);

РЕДАКТИРОВАТЬ:

манифест. 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;
}

В общем случае $(document).ready(function(){ будет запускаться немедленно, когда фон. js загружается. Если handleMessage еще не был вызван и secHeaders установлен, то внутренний HTML будет установлен в пустой массив.

Другая проблема может заключаться в том, что secHeaders не содержит допустимой строки HMTL. Возможно, попробуйте преобразовать secHeaders в строку JSON и проверьте вывод:

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