Search code examples
javascripthtmlcssgoogle-chrome-extensionchromium

Why does my Chrome extension's browser action popup not show?

Here is my manifest.json file:

{
    "browser_action"        :
    {
        "default_icon"  : "Assets/Chromium logosu.png",
        "default_popup" : "main.html"
    },
    "description"   : "Bu eklenti, Chromium'un güncelleştirmelerini denetler ve yükler.",
    "manifest_version"  : 2,
    "name"          : "Chromium Güncelleştirici",
    "version"       : "1.0"
}

And here is my main.html file:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Güncelleştirici_Eklenti_Projesi.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Başlık.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Telif Hakkı Metni.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Güncelleştirmeleri Denetle (Pasif).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Ayarlar (Pasif).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/Hakkında (Pasif).png" id="Image4" alt=""></div>
</body>
</html>

When I click the extension's button, I get this:

My extension's popup menu

Actually, my popup page should be shown like this:

The UI of my popup file

So, what should I do in order to fix this issue?

Solution

  • Popup html takes height and width from the content of the html loaded.

    In your case, all div elements inside body are position:absolute, which results in zero height and width to body tag, and hence the Popup UI appears as a small box when loaded as browser action popup.

    You can verify this behaviour by giving fixed height or width to tag in your css.

    Why it appears fine when main.html loaded directly to browser? It actually appears fine, but over here as well the body results in zero height, but because the viewport is not depended on the content of body, it shows the content outside the body as depicted in sample screenshot below.

    enter image description here

    How to fix? Fix your CSS such that body gets overall height of the actual content that you need to show. Not sure why every element here you have placed as position absolute, I feel you can avoid that approach and still get the UI as expected by you. Worst case, you can hardcode the body with fixed height and width of what you need the actual popup html size to be.