Home/ Questions/Q 7772965
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T17:00:21+00:00

I want to develop a chrome extension which docks a new panel to the

  • 0

I want to develop a chrome extension which docks a new panel to the bottom of current web page. The GUI should be something like Developer tools.

I tried to inject an iframe to web page like this:

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

The iframe can be seen, but it covers the content of the main page.
How can I solve the problem? Hope someone can give me some suggestions or simple examples…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So, with this you’re not adjusting the underlying page so that the bottom 300px of the page isn’t covered up from your panel. Here is some javascript to bump up the bottom of the page 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();

    Also, instead of just appending to the body like this: $('body').append(, I suggest using document.documentElement instead of body, and even using vanilla javascript for something so basic, this would look like:

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

    I think this will solve your problem… not sure if your page has something unique that’s causing an error

    • 0