Chrome 扩展无法占据整个 window 宽度

Question

我开发了一个 chrome 扩展，格式是站在用户顶部的单杠 window。有点东西 "like" 它:

但是当我将它作为扩展添加到 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

弹出 window 是它自己的 window。因此，当 #barra 将其宽度指定为 100% 时，它是弹出 window 的 body 元素的 100%。但是没有什么可以使 body 具有特定的大小。例如，如果我检查你的扩展程序的弹出窗口，Chrome 告诉我 body 元素的宽度为 9px，每边边距为 8px（由用户代理样式设置 sheet ).您的值可能不同，但不会大很多。如果你想让它更宽，你需要 CSS.css 明确告诉 body 它应该有多宽，而不是使用百分比。

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

Chrome 扩展无法占据整个 window 宽度

Chrome extension unable to occupy the full window width

html

google-chrome

manifest

google-chrome-extension