Why does my Chrome extension's browser action popup not show?
Question
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:
Actually, my popup page should be shown like this:
So, what should I do in order to fix this issue?
2 answers
solution1
0 ACCPTED 2021-06-05 08:21:04
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.
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.
solution2
0 2021-06-05 08:51:44
@Junaid Hamza
Ok, I have fixed my issue via doing these things:
1- First of all, I have removed all of "position:absolute;"s. But, when I did this, I encountered another issue. This time, the order of images was broken.
2- In order to fix the second issue, I have used a weird method. I have merged last three images into one image.
Anyway, thank you for your answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.