크롬 확장 메시지 전달 - HTML 전달 방법

Question

크롬 확장 프로그램 내에서 로컬로 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는 직렬화되지 않습니다.

당신이 할하려고 할 수 있습니다하면 매니페스트의 web_accessible_resources section에 HTML을 추가하는 것입니다 같은

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

를 사용하여,

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

그런 다음 직접 콘텐츠 스크립트 파일을로드 할 수는 URL.

iframe으로 삽입하거나 정적 HTML 인 경우 XHR로 요청하고 응답을 조작 할 수 있습니다.