Question

我开发了一个镀铬扩展，其格式为位于用户窗口顶部的水平条。这是“喜欢”的东西：

但是当我将其作为扩展程序添加到Chrome时，它就是这样的样子（请参阅右上角的图标）：

这里有什么问题？

这是清单：

{
  "manifest_version": 2,

  "name": "CLAWS",
  "description": "testing",
  "version": "1.0",

  "permissions": [
    "tabs",
    "https://google.com.br/"
  ],
  "browser_action": {
    "default_icon": "icone_app.png",
    "default_popup": "HTML.html"
  }
}

编辑：HTML代码：

<!DOCTYPE html>
<html>
<head>
<link href='CSS.css' rel='stylesheet' type='text/css'>
</head>
<body>

<div id="barra"></div>

</body>
</html>

和CSS.css：

#barra{
   background-color:red;
   width:100%;
   height:80px;
}

Answer 1

弹出窗口是它自己的窗口。因此，当#barra将其宽度指定为100％时，它是弹出窗口的body元素的100％。但没有什么能让身体变得特别大。例如，如果我检查您的扩展程序的弹出窗口，Chrome会告诉我body元素的宽度为9px，每边的边距为8px（由用户代理样式表设置）。您的价值可能会有所不同，但不会大得多。如果你希望它更宽，你需要让CSS.css明确地告诉主体它应该有多宽，而不是使用百分比。

但是如果你想在用户窗口的顶部有一个栏，我不确定你的浏览器动作是否是你想要的。浏览器操作在松散焦点时关闭，特别是当用户与网页进行任何交互时。相反，我认为你会想要一个内容脚本，将条形放在屏幕的顶部（可能只是一些css：body{border-top:80px solid red;}）。

Chrome扩展程序无法占据整个窗口宽度

1 个答案: