Shrunk Chrome extension popup

130 views
Skip to first unread message

Mori

unread,
Dec 30, 2022, 11:18:53 AM12/30/22
to Chromium Extensions

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:
shot1.png

And this is how it should look:
shot2.png

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

Stefan Van Damme

unread,
Dec 30, 2022, 11:31:31 AM12/30/22
to Chromium Extensions, Mori
Hi Mori,

If the popup width is smaller then it places the button on the next line. So check in your "popup.css" file for min-width.
html{min-width:295px;min-height:285px;padding:0;margin:0}

Here is an example that brings everything in one line:
<form>
  <div class="emaibox">

    <label for="email">Email</label>
    <input type="email" id="email">
    <input type="submit">
  </div>

  <p>Hello, world! This is a paragraph. And this is some text.</p>
</form>


And add a CSS code in your popup.html file:
.emaibox{display:inline-flex;align-items:center;gap:4px;}
Then you should see the desired result.

Thanks,

Mori

unread,
Dec 30, 2022, 11:51:34 AM12/30/22
to Chromium Extensions, stefa...@gmail.com, Mori
"check in your popup.css"
I don't have any CSS file. My Chrome extension is just an HTML file with above-mentioned source code — nothing more.

T S

unread,
Dec 30, 2022, 11:55:17 AM12/30/22
to Chromium Extensions, Mori, stefa...@gmail.com
Then add one so you can adjust it, or you're stuck with the default css.
Alternatively if this is the only thing you care about, you could use inline styles in your html.

Stefan Van Damme

unread,
Dec 30, 2022, 12:49:14 PM12/30/22
to Chromium Extensions, T S, Mori, Stefan Van Damme
Hi Mori,

|| I don't have any CSS file. My Chrome extension is just an HTML file with above-mentioned source code — nothing more.

Then add the CSS line in the head, see this HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./popup.css" />
</head>
<body>

<form>
  <div class="emaibox">

    <label for="email">Email</label>
    <input type="email" id="email">
    <input type="submit">
  </div>

  <p>Hello, world! This is a paragraph. And this is some text.</p>
</form>

</body>
</html>

And create a new "popup.css" file in the root directory of that Chrome extension, that with this code:
html{min-width:295px;min-height:285px;padding:0;margin:0}
.emaibox{display:inline-flex;align-items:center;gap:4px;}

If you are just a beginner developer, you can follow my handy tutorial to create a simple Chrome extension with a popup panel:
Easily Creates a Google Chrome Extension Manifest V3 for Beginners (from scratch)

Thanks,

Stefan Van Damme

unread,
Dec 30, 2022, 12:55:28 PM12/30/22
to Chromium Extensions, T S
Hi T S,

|| Alternatively if this is the only thing you care about, you could use inline styles in your html.
Inline CSS is not recommended due to Manifest V3 if you use this. 
"content_security_policy": {
    "extension_pages": "default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self'; object-src 'none'"
},
Try using class names to style your asset (input, button, etc.) and make the code easy to understand for you. Style in a stylesheet file and building block in the HTML file.

Thanks,

Mori

unread,
Jan 2, 2023, 12:32:15 AM1/2/23
to Chromium Extensions, stefa...@gmail.com, T S
Thanks for the answer! 🙏

Stefan Van Damme

unread,
Jan 2, 2023, 2:20:47 AM1/2/23
to Chromium Extensions, Mori
Hi Mori,

You are welcome.

Thanks,

Reply all
Reply to author
Forward
0 new messages