Chrome扩展程序popup.html无法正常显示

时间:2013-03-06 07:57:41

标签: css google-chrome-extension

我创建了一个使用popup.html文件的页面操作扩展。它曾经很完美。当我点击图标时,它会显示一个小框,只显示popup.html页面的一角。我设置了身体和html css的高度和宽度,但没有运气让盒子更大。我还将css移到另一个名为popup.css的页面上,并添加到popup.html head。

popup.html

有没有人遇到过这个问题? 请帮忙。

HTML:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="popup_script.js"></script>
    <link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul>
        <li id="all">All</li>
        <li id="title">Name</li>
        <li id="artist">Artist</li>
        <li id="album">Album</li>
        <li id="art">Artwork</li>
    </ul>
    <textarea id="info" type="text"></textarea>
</body>
</html>

CSS:

body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}

ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}

li {
text-align: center;
padding: 5px 20px;
}

li:hover {
background: #06477D;
color: white;
}

textarea#info {
position: absolute;
}

2 个答案:

答案 0 :(得分:3)

如果你正在运行最新的Chrome Canary版本,那可能就是问题所在。我的所有扩展程序的弹出窗口都显示如下。

试用不同版本的Chrome?

编辑:是的,我刚刚发现了Chrome / Chromium的一些错误报告:

https://code.google.com/p/chromium/issues/detail?id=180724 https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/09xiPfAfrIc

答案 1 :(得分:3)

在html body标签中设置height和width属性。意思是,只需使用高度和宽度属性为现有的body标签添加样式。