Html – How to 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;
< /style >

< iframe src="" width="100%" height="100%" scrolling="auto" > < /iframe >

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

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

Best 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:

Increase max popup width in a Chrome extension?