페이지 요소에 html로드 (크롬 확장)

Question

특정 웹 페이지 상단에 바가있는 Chrome 확장 프로그램을 작성하려고합니다. 나는이 같은 내 콘텐츠 스크립트가있는 경우 :

$('body').prepend('<div id="topbar"><h1>test</h1></div>'); 

모든 것이 좋아 보인다,하지만 내가 궁극적으로 원하는 것은이 같은 것입니다 : topbar.html이

$('body').prepend('<div id="topbar"></div>'); 
$('#topbar').load('topbar.html'); 

입니다 :

<h1>test</h1> 

그래도 이걸 변경하면 웹 페이지가 엉망이됩니다. 대부분의 콘텐츠가 사라지고 일부 광고 만 보입니다. 나는 'test'헤더도 볼 수 없다. 페이지에 다른 '톱 바'ID가 없는지 확인했습니다. 뭐가 문제 야? 당신이하려고하면

chrome.extension.getURL("topbar.html") 

을 이제 : 당신은 실행하여이 경로를 얻을 수 있습니다

chrome-extension://<ID>/topbar.html 

: extenion 폴더 안에있는 파일의

Answer 1

URL의 형식은 다음과

$('#topbar').load(chrome.extension.getURL("topbar.html")); 

크로스 출처 정책 때문에 사용자를 놓칠 수 없습니다. 배경 페이지는 이러한 제한이없는, 그래서 당신은 콘텐츠 스크립트에 결과가 HTML을로드 할 필요 통과 할 것 :

content_script.js :

chrome.extension.sendRequest({cmd: "read_file"}, function(html){ 
    $("#topbar").html(html); 
}); 

background.html :

현실 세계에서는 아마도 topbar.html을 한 번만 읽고 다시 사용하게됩니다.

Answer 2

위의 해결 방법이 효과가있는 반면주의해야 할 것은 이벤트 처리기에서 true를 반환하여 $ .ajax 호출이 성공한 후에도 통신 포트를 계속 사용할 수 있어야한다는 것입니다.

자세한 내용은 아래를 참조하십시오. https://code.google.com/p/chromium/issues/detail?id=307034