为什么我的 Chrome 扩展程序的浏览器操作弹出窗口不显示？

Question

这是我的 manifest.json 文件：

{
    "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"
}

这是我的 main.html 文件：

<!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>

当我点击扩展程序的按钮时，我得到了这个：

My extension's popup menu

其实我的弹出页面应该是这样的：

The UI of my popup file

那么，我应该怎么做才能解决这个问题？

Answer 1

弹出窗口 html 从加载的 html 内容中获取高度和宽度。

在您的例子中，body 内的所有 div 元素都是 position:absolute，这导致 body 标记的高度和宽度为零，因此 Popup UI 显示为一个小框当作为浏览器操作弹出窗口加载时。

您可以通过在 css 中为标签指定固定高度或宽度来验证此行为。

为什么 main.html 直接加载到浏览器时显示正常？ 它实际上看起来很好，但在这里 body 的高度也为零，但是因为视口不依赖于 body 的内容，所以它显示 body 外部的内容，如下面的示例屏幕截图所示。

如何修复？ 修正您的 CSS 以便 body 获得您需要显示的实际内容的整体高度。不确定为什么这里的每个元素都放置为绝对位置，我觉得你可以避免这种方法并仍然按照你的预期获得 UI 。最坏的情况是，您可以使用固定的高度和宽度对主体进行硬编码，以达到实际弹出 html 大小的需要。

Answer 2

@Junaid Hamza

好的，我已经通过执行以下操作解决了我的问题：

1- 首先，我删除了所有“position:absolute;”。但是，当我这样做时，我遇到了另一个问题。这次图片顺序乱了。

2- 为了解决第二个问题，我使用了一个奇怪的方法。我已将最后三张图片合并为一张图片。

无论如何，谢谢你的回答。

为什么我的 Chrome 扩展程序的浏览器操作弹出窗口不显示？

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

javascript

html

css

google-chrome-extension

chromium