Search code examples
htmlcssgoogle-chromeiframegoogle-chrome-extension

How Can I Expand The Popup Window of My Chrome Extension


enter image description here

I want to expand the popup window which comes from when user click the extension button...

(I want to expand the size of pop-up window to red area)

Here is the code that I'm using to show pop-up;


< style type="text/css" >
body {
  min-width: 1005px; /* your desired width */
  max-width: 100%;
  position: relative;
  vertical-align:middle;
}
< /style >

< iframe src="http://stackoverflow.com" width="100%" height="100%" scrolling="auto" > < /iframe >

I tried (in body css) width: 1280px; height: 800px; -but no luck. It's not working correctly...

UPDATE: Similar question( maybe a duplicate ? ); chrome extension, popup window's height


Solution

  • Chrome extension popups can have a maximum height of 600px and maximum width of 800px. Changing the width or height using CSS on the html or body element will just cause scroll bars (as you have noticed) when over these maximums. Using something like window.resizeBy(x,y) will have no effect.

    You can hide the scrollbars using CSS but that will not have the desired effect of making the page bigger than the maximums imposed by Chrome.

    One option might be to use a JavaScript dialog/modal in the page when the browser/page action is clicked instead of using the built in popup.

    Some references to similar questions:

    http://groups.google.com/a/chromium.org/group/chromium-extensions/browse_thread/thread/9c921612e2692376

    Increase max popup width in a Chrome extension?