How Can I Expand The Popup Window of My Chrome Extension

Question

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

Have you tried changing the min-width to the width you want? — mowwwalker, Jan 24 '12 at 07:19
@Walkerneo I tried that. I'm started to think it's a chrome's security feature. ( Now, I'm searching a pop-up extension which has bigger window size than my pop-up_ ) — Lost_In_Library, Jan 24 '12 at 07:25

score 76 · Accepted Answer · edited Aug 28 '19 at 17:40

76

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?

edited Aug 28 '19 at 17:40

Pavindu

2,684
6
44
77

answered Jan 24 '12 at 08:07

Adam Ayres

8,732
1
32
25

4

600px by 800px is a good limiting size too. The beauty of a chrome extension is to simplify getting somethings done. In the screen shot above it looks like an iframe containing stackoverflow. I personally would rather just go to stackoverflow than use stackoverflow in an iframe. That is something to keep in mind. – jjNford Jan 31 '12 at 13:59
17

As of "Chrome Version 38.0.2125.111 m" the maximum size that doesn't show scrollbars is: – Sverrir Sigmundarson Oct 30 '14 at 22:34
2

@SverrirSigmundarson May I know where this can be checked? These things keep changing, I presume. – Ansh May 14 '18 at 18:33
1

@Ansh the relevant code for the extension popups is stored here https://cs.chromium.org/chromium/src/chrome/browser/ui/views/extensions/extension_popup.cc?sq=package:chromium&dr=CSs&g=0&l=26-29 There seems to be 20px lost in some sort of padding that happens in the window itself. – Sverrir Sigmundarson Nov 07 '18 at 08:01
2

https://cs.chromium.org/chromium/src/chrome/browser/ui/views/extensions/extension_popup.h?sq=package:chromium&dr=CSs&g=0&l=55 It is actually here, for someone who wants to have the confirmation from chrome's source code. – Cảnh Toàn Nguyễn Jul 22 '19 at 07:46
1

you can always use `overflow: overlay` to make scrollbars not take space – venimus Feb 11 '21 at 10:33

score 5 · Answer 2 · answered May 10 '23 at 04:55

5

To change size of extenstion popup window you should style html element in CSS sheet linked in popup.html file.

As of 2023 with Manifest v3:

Maximum dimensions for Google Chrome Extensions popup window that you can achieve are:

popup.css

html
{
    width: 1000px; /* max: 1000px */
    height: 750px; /* max: 750px */
}

answered May 10 '23 at 04:55

konieckropka

109
1
7

wrong info: https://developer.chrome.com/docs/extensions/reference/browserAction/#:~:text=The%20popup%20cannot%20be%20smaller,file%20with%20the%20popup's%20contents. – Rafael Lima Aug 17 '23 at 08:43

How Can I Expand The Popup Window of My Chrome Extension

2 Answers2

Linked