Search code examples
htmlgoogle-chrome-extensionpopup

Shrunk Chrome extension popup

I created a popup for a Chrome extension. This is the popup source code:

<form>
  <label for="email">Email</label>
  <input type="email" id="email">
  <input type="submit">
  <p>Hello, world! This is a paragraph. And this is some text.</p>
</form>

This is how it looks:
enter image description here

And this is how it should look:
enter image description here

As you see, the elements aren't in the right position.

  1. Why does it happen?
  2. How can it be prevented?
Solution

  • Why

    According to the source of Chromium on 1/3/23, the default minimum width and height is 25px by 25px:

    https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/extensions/extension_popup.h;l=60

    // The min/max height of popups.
// The minimum is just a little larger than the size of the button itself.
// The maximum is an arbitrary number and should be smaller than most screens.
static constexpr gfx::Size kMinSize = {25, 25};
static constexpr gfx::Size kMaxSize = {800, 600};

    Your content appears to be out of position, because it's trying to fit within that width of 25px, but overflows instead.

    Prevention

    Therefore, at least one of the parent elements of your content needs to be styled with a width that will fit your content.

    Determine the Parent Element to Style

    In your case, the parent / container element <form> could be styled.

    Choose a Style Approach

    There is more than one way to force the parent element's width to be a certain length, percentage, or keyword value:

    • In-line CSS within HTML <form> tag
      • <form style="min-width: max-content !important">...</form>
    • Internal CSS:
      • <style> form { min-width: max-content !important; } </style>
    • External CSS:
      • form { min-width: max-content !important; }

    Mobile

    For mobile web development, I would recommend to not use height as another user suggested. Even though it's within a popup, please use min-height instead. Otherwise you might have overlapping container elements, like I did until I used min-height.