Chrome extension - overlay content from iframe on underlying page

Question

I have a chrome extension that shows a menu on the right side of the page, consisting of a few buttons that are 47px wide each. Because of this, the width of the iframe is also set at 47 px.

However, when a button is clicked, I want to show a dropdown (or 'dropleft' as you could say) which of course is wider than the 47px. Currently this content is cut off at the edge of the iframe.

I would prefer to be able to control all this from the iframe, so that I don't have to update the extension whenever I want to change something. Is there a way to overlay content from the iframe on the website below?

EDIT

I don't think resizing the iframe would be the solution. The div with additional information would e.g. be 400x200 pixels. If I'd just increase the size of the iframe, there would be transparent parts which would show the underlaying website but wouldn't be clickable. Ideally, the content from the iframe would just overlay from the existing iframe size.

Function in content.js that loads the iframe:

function showMenu(element) {

    var iframe = document.createElement('iframe');

    iframe.src = chrome.runtime.getURL('menu.html);
    iframe.style.cssText = "\
                            position:absolute;\
                            visibility:visible;\
                            top:33%;\
                            right:0px;\
                            width:47px;\
                            height:198px;\
                            margin:0;\
                            padding:0;\
                            border:none;\
                            overflow:hidden;\
                            background:transparent;\
                            z-index:999999;\
                        ";

    element.append(iframe);       
}

menu.html

<style>
html, body, iframe, h2 {
    margin: 0;
    padding: 0;
    border:none;
    display: block;
    width: 100vw;
    height: 100vh;
    background: transparent;
    color: black;
}
h2 {
    height: 50px;
    font-size: 20px;
}
iframe {
    height: calc(100vh - 50px);
}
</style>

<iframe class="menu"></iframe>

Possible duplicate of http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside — Joey Ciechanowicz, Apr 11 '16 at 14:16
I don't think resizing the iframe would be the solution. The div with additional information would e.g. be 400x200 pixels. If I'd just increase the size of the iframe, there would be transparent parts which would show the underlaying website but wouldn't be clickable. Ideally, the content from the iframe would just overlay from the existing iframe size. (Not sure if that's possible though) — Vincent, Apr 11 '16 at 14:21
In that case, why use an iframe and not directly add an element to the page? — Joey Ciechanowicz, Apr 11 '16 at 14:22
Cause I want to load the content dynamically, so I don't have to update the extension every time I want to change the UI. — Vincent, Apr 11 '16 at 14:23

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

There is no way for an iframe to overflow its bounds (see this post).

So you either need to increase the size of your iframe when you want to show more content, perhaps by message-passing with the extension. Or to not use an iframe and sacrifice not having to release updates for the extension when you change something.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 11 '16 at 14:27

Joey Ciechanowicz

3,345
3
24
48

Chrome extension - overlay content from iframe on underlying page

1 Answers1