Question

我想开发一个Chrome扩展程序，它将新面板停靠在当前网页的底部。 GUI应该类似于开发人员工具。

我尝试将iframe注入网页，如下所示：

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

可以看到iframe，但它涵盖了主页的内容。我该如何解决这个问题？希望有人可以给我一些建议或简单的例子......

Answer 1

因此，使用此功能，您不会调整底层页面，以便从面板中覆盖页面的底部300px。这里有一些javascript来提升页面底部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();

此外，我建议使用$('body').append(代替document.documentElement，而不是仅仅添加body这样的身体，甚至使用香草javascript来实现这么基本的东西，像：

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

我认为这样可以解决您的问题...不确定您的网页是否包含导致错误的独特内容

Chrome扩展程序：如何将扩展程序的html页面停靠到当前网页？

1 个答案: