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

我开发了一个Chrome扩展程序，其格式为位于用户窗口顶部的水平条。这件事情，“像”是：Chrome扩展程序无法占用整个窗口宽度

但它是如何看起来就像当我把它添加到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; 
}

来源

2015-09-11 Mr Guliarte

请发表HTML.html。它创建了自己的窗口，窗口大小与主窗口分开。特别是没有什么特别的宽度，所以我的猜测是默认为最小宽度。 – Teepeemm

对不起，你有什么意思“有一个特定的宽度”？这是关于扩展窗口？代码现在在帖子中。 –

弹出窗口是它自己的窗口。所以当#barra指定其宽度为100％时，它是弹出窗口正文元素的100％。但是没有任何东西能让身体达到特定的尺寸。例如，如果我检查了您的扩展程序的弹出式窗口，则Chrome会告诉我body元素的宽度为9px，每边的边距为8px（由用户代理样式表设置）。你的价值观可能不同，但它们不会太大。如果你希望它变宽，你需要让CSS.css明确地告诉主体应该是多宽，而不是使用百分比。

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

来源

2015-09-11 00:55:47 Teepeemm

感谢您的回答！真的浏览器的行动不是我想要的。但我不认为内容脚本是合适的，因为我没有看到用户正在访问的页面的这种复杂的交互（我可能是错的）。只使用CSS添加栏也不起作用... –

内容脚本是与用户正在访问的页面进行交互的唯一选项。但它并不一定非常复杂。这只是你要执行或用来获得你想要的效果的脚本或CSS。在这种情况下，一行css或几行js应该能够完成工作。尽管这也取决于你想用顶部的红色条做什么。 – Teepeemm

嗯，我基本上希望酒吧每次都呆在用户的窗口顶部，并能够识别他/她在自己的条形码中通过javascript选择的单词。我在扩展方面是全新手，但如果酒吧有一个更复杂的HTML（不能用CSS“模拟”），我应该如何处理内容脚本（据我所知，只接受JS和CSS代码）？ –

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

回答

相关问题