Question

我正在尝试将Chrome扩展中的本地HTML发送到活动标签上的div。我通过后台脚本发送HTML，并通过注入活动选项卡的内容脚本接收。

我已经让端口工作并使用各种简单的基于文本的消息进行测试。 div也出现了，但它是空白的，因为HTML没有正确发送。有人知道我的代码有什么问题吗？

后台脚本：

chrome.runtime.onConnect.addListener(function(port) {
    console.assert(port.name == "sidebar");
    port.onMessage.addListener(function(msg) {
        if (msg.command == "read_sidebar")
        {
            //var sidebarURL = chrome.extension.getURL("sidebar.html");
            //console.log(sidebarURL);
            var element = document.createElement('div');
            element.id = "test";
            $("test").load('sidebar.html');
            port.postMessage({command: "load_sidebar", html: element.innerHTML})
        } 
        else if (msg.command == "close_load") {
            console.log("told to close load");
        } 
    });
});

内容脚本：

function loadSidebar() {

    var port = chrome.runtime.connect({name: "sidebar"});
    port.postMessage({command: "read_sidebar"});
    port.onMessage.addListener(function(msg) {
        if (msg.command == "load_sidebar")
        {
            console.log(msg.html);
            document.getElementById("mySidebar").innerHTML= msg.html;
            port.postMessage({command: "close_load"});
        }
    });
}

Answer 1

此API只能发送JSON可序列化对象，而HTMLElement不可序列化。

您可能尝试将HTML添加到清单的web_accessible_resources section：

  "web_accessible_resources" : [
    "sidebar.html",
    (any resources used by sidebar.html)
  ],

然后，您可以使用

直接从内容脚本加载文件

chrome.runtime.getURL('sidebar.html')

作为其网址。

您可以将其作为iframe注入，或者如果是静态HTML，您可以使用XHR请求它并操纵响应。

Chrome扩展程序消息传递 - 如何传递HTML

1 个答案: