Use the chrome-bootstrap project to get a nice chrome like options page.
--- /dev/null
+[submodule "chrome-bootstrap"]
+ path = chrome-bootstrap
+ url = https://github.com/roykolak/chrome-bootstrap.git
+ branch = tags/v1.2.1
--- /dev/null
+Subproject commit 419698ec6fe922487d2fe3f11c92fd1c8ffbd8a6
+chrome-bootstrap/chrome-bootstrap.css
images/outlet-128x128.png
images/outlet-19x19.png
images/outlet-38x38.png
images/outlet-128x128.png
images/outlet-19x19.png
images/outlet-38x38.png
"manifest_version": 2,
"minimum_chrome_version": "22",
"name": "Web Power Switch Manager",
"manifest_version": 2,
"minimum_chrome_version": "22",
"name": "Web Power Switch Manager",
"description": "Quickly control Web Power Switches",
"icons": {
"128": "images/outlet-128x128.png"
"description": "Quickly control Web Power Switches",
"icons": {
"128": "images/outlet-128x128.png"
<head>
<title>Web Power Switch Manager Options</title>
<head>
<title>Web Power Switch Manager Options</title>
+<link rel="stylesheet" type="text/css" href="chrome-bootstrap/chrome-bootstrap.css" />
<script src='common.js'></script>
<script src='options.js'></script>
</head>
<script src='common.js'></script>
<script src='options.js'></script>
</head>
-<body background='images/outlet.svg'>
+<body class="chrome-bootstrap">
+ <div class="frame">
+
+ <div class="navigation">
+ <h1><a href="#">Web Power Switch</a></h1>
+ <ul class="menu">
+ <li class="selected">
+ <a href="#options">Options</a>
+ </li>
+ </ul>
+ <ul>
+ <li> <img src='images/outlet-128x128.png'></li>
+ </ul>
+ </div>
+
+ <div class="mainview view">
+ <div id="options" class="selected">
+ <header>
+ <h1>Options</h1>
+ </header>
+ <div class="content">
+
+<section>
+ <h3>Connection</h3>
+
- <td>URL:</td><td><input type='text' id='url'></td>
-</tr>
-<tr>
- <td>User:</td><td><input type='text' id='user'></td>
+ <td>URL:</td><td><input type='text' id='url' size=50></td>
- <td>Pass:</td><td><input type='text' id='pass'></td>
+ <td>User:</td><td><input type='text' id='user' size=50></td>
- <td colspan=2 align=center><input type='button' id='save' value='Save'></td>
+ <td>Pass:</td><td><input type='text' id='pass' size=50></td>
-<div id='msg'>You must hit "Save" the first time to authorize the client</div>
+
+</section>
+
+<div>
+ <h3>Save Settings</h3>
+ <p>
+ <input type='button' id='save' value='Save'></td>
+ </p>
+ <div id='msg'>You must hit "Save" the first time to authorize the client</div>
+</div>
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+