Chrome Extension popup.html not display correctly anymore

问题

I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.

Has anyone run into this issue? Please help.

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;
}

回答1:

If you're running the latest Chrome Canary build, that could be the problem. All of my extension's popups are showing up like this.

Try on a different build of Chrome?

EDIT: Yeah, I just found some bug reports for 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

回答2:

Set the height and width properties in your html body tag. Means, simply add style to your existing body tag with height and width properties.

来源：https://stackoverflow.com/questions/15241864/chrome-extension-popup-html-not-display-correctly-anymore

标签

css

google-chrome-extension