크롬 확장 프로그램 : 확장 프로그램의 html 페이지를 현재 웹 페이지에 도킹하는 방법은 무엇입니까?

현재 웹 페이지의 맨 아래에 새 패널을 도킹하는 크롬 확장 프로그램을 개발하고 싶습니다. GUI는 개발자 도구와 비슷해야합니다. 크롬 확장 프로그램 : 확장 프로그램의 html 페이지를 현재 웹 페이지에 도킹하는 방법은 무엇입니까?

나는 다음과 같이 웹 페이지에 iframe을 주입하려고 :

$('body').append(
    '<iframe src="' 
    + chrome.extension.getURL('panel.html') 
    + '" style="position: fixed; width: 100%; bottom: 0px; height: 300px; display: block;"></iframe>');

iframe이

는 볼 수 있지만, 메인 페이지의 내용을 다룹니다. 어떻게 문제를 해결할 수 있습니까? 누군가가 나에게 제안이나 간단한 예제를 줄 수 있기를 바랍니다.

출처

2012-04-11 gjtiger

질문의 코드는 sugges jQuery를,이다 일으키는 독특한 무언가가있는 경우 ... 확실하지 : 같은 기본,이 보일 것이다 확장 기능에 이미 jQuery가 포함되어 있습니다. 'manifest.json' 파일과 다른 관련 코드의 관련 내용을 보여줄 수 있습니까? 문제를 자세히 설명하는 스크린 샷도 환영합니다. –

이렇게하면 페이지의 아래쪽 300px가 패널에서 가려지지 않도록 기본 페이지가 조정되지 않습니다. 또한

var html = document.documentElement; 
//make sure <html> to the top of the page: 
html.style.position = 'relative'; 
html.style.top = '0px'; 

window.onresize = function resizeFunc(){ 
    html.style.height = (window.innerHeight - 300) + 'px'; 
}; 
window.onresize();

그냥이 같은 몸에 추가하는 대신, : 다음 페이지 300 픽셀의 바닥을 범프 몇 가지 자바 스크립트는 $('body').append(, 내가 대신 body의 document.documentElement을 사용하는 것이 좋습니다, 심지어 뭔가 자바 스크립트 바닐라를 사용하여 나는이 문제를 해결할 것이라고 생각

var iframe = document.createElement('iframe'); 
iframe.style = '<your style code above>'; 
iframe.src = chrome.extension.getURL('panel.html'); 
document.documentElement.appendChild(iframe);

페이지가 오류

출처

2012-04-11 23:58:37

답변을 수락하는 것을 잊지 마십시오. p ...^ –

솔루션을 삽입 한 iframe은 기본 웹 페이지의 내용을 포함하지 않지만 브라우저 창 하단에서 수정할 수 없습니다. 그러나 나는 둘 다 원한다. 이것을 어떻게 할 수 있습니까? – gjtiger

브라우저 창 하단에 고정되어 있지 않은 경우 어떻게 배치할까요? –

크롬 확장 프로그램 : 확장 프로그램의 html 페이지를 현재 웹 페이지에 도킹하는 방법은 무엇입니까?

답변

관련 문제