Chrome拡張機能：拡張機能のhtmlページを現在のウェブページにドッキングする方法は？

現在のWebページの下部に新しいパネルをドッキングするクロム拡張を開発したいと思います。 GUIは開発ツールのようなものでなければなりません。Chrome拡張機能：拡張機能のhtmlページを現在のウェブページにドッキングする方法は？

私はこのようなWebページに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ピクセルのボトムアップバンプするためにいくつかのjavascriptがある$('body').append(、私の代わりにbodyのdocument.documentElementを使用することをお勧め、とさえ何かのためのjavascriptバニラを使用して、これは次のようになりそう基本：私はこれはあなたの問題を解決すると思います

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

答えを受け入れることを忘れないでください：^ –

あなたのソリューションでは、インジェクションされたiframeはメインWebページのコンテンツをカバーしませんが、ブラウザウィンドウの下部で修正することはできません。しかし私は両方が欲しい。どうすればこれを達成できますか？ – gjtiger

ブラウザウィンドウの下部に固定されていない場合は、どのように配置しますか？ –

Chrome拡張機能：拡張機能のhtmlページを現在のウェブページにドッキングする方法は？

答えて

関連する問題