aisensiy/script.js

## script.js
setTimeout(function() {
    $('input[name=email]').focus();
}, 500);
$('input[type=password]').keyup(function(e) {
    if (e.keyCode === 13) {
        $('#login-submit').click();
    }
});
$('#cancel').click(function(e) {
    e.preventDefault();
    // TODO: handle close operation.
});
$('#login-submit').click(function(e) {
    e.preventDefault();
    // TODO: handle login operation.
    var url = 'http://meiwei.fm/login',
        email = $('[name=email]').val(),
        password = $('[name=password]').val();
    $('.loading').show();
    $('.error').hide();
    api.send_login_request(email, password, {
        failed: function(data) {
            $('.loading').hide();
            try {
                $('.error').show().find('h5').text(data.error_msg);
            } catch (e) {
                $('.error').show().find('h5').text('无法访问服务器');
            }
            chrome.extension.sendRequest({
                'action': 'logout'
            });
        },
        success: function(data) {
            $('.loading').hide();
            console.log(data);
            localStorage.uid = data.logged_in_user_id;
            localStorage.username = data.logged_in_username;
            chrome.extension.sendRequest({
                'action': 'login'
            });
            window.close();
        }
    });
});

## sigin.html
<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        </script>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/style2.css">
        <title>
            美味书签 - 设置选项
        </title>
    </head>

    <body>
        <div class="container">
            <img class="logo" src="../icons/icon48.png">
            <h1>
                美味书签
                <span class="desc">
                    用户登录
                </span>
                <span class="register">
                    <a target="_blank" href="http://meiwei.fm/register">注册新账号</a>
                </span>
            </h1>
            <div class="clearfix">
            </div>
            <div class="content">
                <ul class="option">
                    <li class="error clearfix">
                        <h5>
                        </h5>
                    </li>
                    <li class="clearfix loading">
                        <h5>
                            正在登录，请稍后...
                        </h5>
                        <progress intermedia>
                        </progress>
                    </li>
                    <li class="clearfix first">
                        <h3>
                            输入邮箱：
                        </h3>
                        <input name="email" class="sinput" autofocus>
                    </li>
                    <li class="clearfix">
                        <h3>
                            输入密码：
                        </h3>
                        <input name="password" type="password" class="sinput">
                    </li>
                    <li class="clearfix">
                        <h3>
                            <a target="_blank" href="http://meiwei.fm/password/forgot">忘记密码？</a>
                        </h3>
                        <a id="login-submit" class="green-button " href="#">登录</a>
                        <a class="grey-button " href="#" id="cancel">取消</a>
                    </li>
                </ul>
            </div>
        </div>
        <script type="text/javascript" src="../js/api.js">
        </script>
        <script type="text/javascript" src="../js/jquery-1.7.1.min.js">
        </script>
        <script type="text/javascript" src="../js/signin.js">
        </script>
    </body>

</html>

## style.css
body {
    margin: 5px;
    padding: 5px;
    background: #fff;
    color: #444;
    letter-spacing: 1px;
    font: 12px/1 "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

a {
    color: #407acc;
    text-decoration: none;
}

a:hover {
    color: #084b91;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.container {
    margin: 5px auto 5px auto;
    padding: 20px;
    width: 400px;
    background: #f7fafa;
}

.logo {
    float: left;
    margin-right: 10px;
    width: 27px;
    height: 27px;
}

h1 {
    margin: 0;
    margin: 2px 0 0 0;
    font-weight: normal;
    font-size: 24px;
}

h1 span.desc {
    margin-left: 15px;
    color: #87b226;
    font-style: italic;
    font-size: 14px;
}

h1 span.register {
    float: right;
    margin-top: 8px;
    font-size: 14px;
}

.content {
    margin-top: 20px;
}

.content h2 {
    float: left;
    margin: 0;
    width: 125px;
    font-weight: normal;
    font-size: 12px;
}

.content h3 {
    float: left;
    margin: 8px 0 10px 0;
    width: 125px;
    font-weight: normal;
    font-size: 12px;
}

.content h5 {
    margin: 0;
    color: #b22d2d;
    text-align: center;
    font-weight: normal;
    font-size: 12px;
}

.content p {
    float: left;
    margin: 0;
    color: #888;
}

.content .green-button {
    float: right;
    display: block;
    margin: 0 0 0 10px;
    padding: 8px 0;
    width: 80px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #87b226;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.content .green-button:hover {
    background: #7ea623;
}

.content .grey-button {
    float: right;
    display: block;
    margin: 0 0 0 10px;
    padding: 8px 0;
    width: 80px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ddd;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.content .grey-button:hover {
    background: #ccc;
}

.content ul.option {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content .loading,
.content .error {
    position: absolute;
    top: -30px;
    left: 140px;
}

.content .first {
    margin-top: 50px;
}

.content h6 {
    margin: 0;
    color: #888;
    text-align: center;
    font-weight: normal;
    font-size: 12px;
}

.content ul.option li {
    margin-bottom: 20px;
}

.content ul.option li:last-child {
    margin-bottom: 0;
}

.content ul.option li.error {
    display: none;
}

.content ul.option li input {
    padding: 5px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    letter-spacing: 1px;
    font: 12px/1 "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

.content ul.option li input.sinput {
    width: 262px;
}

.content .loading {
    display: none;
    text-align: center;
}

.content .loading h5 {
    color: black;
}
	setTimeout(function() {
	$('input[name=email]').focus();
	}, 500);
	$('input[type=password]').keyup(function(e) {
	if (e.keyCode === 13) {
	$('#login-submit').click();
	}
	});
	$('#cancel').click(function(e) {
	e.preventDefault();
	// TODO: handle close operation.
	});
	$('#login-submit').click(function(e) {
	e.preventDefault();
	// TODO: handle login operation.
	var url = 'http://meiwei.fm/login',
	email = $('[name=email]').val(),
	password = $('[name=password]').val();
	$('.loading').show();
	$('.error').hide();
	api.send_login_request(email, password, {
	failed: function(data) {
	$('.loading').hide();
	try {
	$('.error').show().find('h5').text(data.error_msg);
	} catch (e) {
	$('.error').show().find('h5').text('无法访问服务器');
	}
	chrome.extension.sendRequest({
	'action': 'logout'
	});
	},
	success: function(data) {
	$('.loading').hide();
	console.log(data);
	localStorage.uid = data.logged_in_user_id;
	localStorage.username = data.logged_in_username;
	chrome.extension.sendRequest({
	'action': 'login'
	});
	window.close();
	}
	});
	});
	<!DOCTYPE html>
	<html>

	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
	</script>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="../css/style2.css">
	<title>
	美味书签 - 设置选项
	</title>
	</head>

	<body>
	<div class="container">
	<img class="logo" src="../icons/icon48.png">
	<h1>
	美味书签
	<span class="desc">
	用户登录
	</span>
	<span class="register">
	<a target="_blank" href="http://meiwei.fm/register">注册新账号</a>
	</span>
	</h1>
	<div class="clearfix">
	</div>
	<div class="content">
	<ul class="option">
	<li class="error clearfix">
	<h5>
	</h5>
	</li>
	<li class="clearfix loading">
	<h5>
	正在登录，请稍后...
	</h5>
	<progress intermedia>
	</progress>
	</li>
	<li class="clearfix first">
	<h3>
	输入邮箱：
	</h3>
	<input name="email" class="sinput" autofocus>
	</li>
	<li class="clearfix">
	<h3>
	输入密码：
	</h3>
	<input name="password" type="password" class="sinput">
	</li>
	<li class="clearfix">
	<h3>
	<a target="_blank" href="http://meiwei.fm/password/forgot">忘记密码？</a>
	</h3>
	<a id="login-submit" class="green-button " href="#">登录</a>
	<a class="grey-button " href="#" id="cancel">取消</a>
	</li>
	</ul>
	</div>
	</div>
	<script type="text/javascript" src="../js/api.js">
	</script>
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js">
	</script>
	<script type="text/javascript" src="../js/signin.js">
	</script>
	</body>

	</html>
	body {
	margin: 5px;
	padding: 5px;
	background: #fff;
	color: #444;
	letter-spacing: 1px;
	font: 12px/1 "Microsoft YaHei", Helvetica, Arial, sans-serif;
	}

	a {
	color: #407acc;
	text-decoration: none;
	}

	a:hover {
	color: #084b91;
	}

	.clearfix:before, .clearfix:after {
	display: table;
	content: "";
	}

	.clearfix:after {
	clear: both;
	}

	.clearfix {
	zoom: 1;
	}

	.container {
	margin: 5px auto 5px auto;
	padding: 20px;
	width: 400px;
	background: #f7fafa;
	}

	.logo {
	float: left;
	margin-right: 10px;
	width: 27px;
	height: 27px;
	}

	h1 {
	margin: 0;
	margin: 2px 0 0 0;
	font-weight: normal;
	font-size: 24px;
	}

	h1 span.desc {
	margin-left: 15px;
	color: #87b226;
	font-style: italic;
	font-size: 14px;
	}

	h1 span.register {
	float: right;
	margin-top: 8px;
	font-size: 14px;
	}

	.content {
	margin-top: 20px;
	}

	.content h2 {
	float: left;
	margin: 0;
	width: 125px;
	font-weight: normal;
	font-size: 12px;
	}

	.content h3 {
	float: left;
	margin: 8px 0 10px 0;
	width: 125px;
	font-weight: normal;
	font-size: 12px;
	}

	.content h5 {
	margin: 0;
	color: #b22d2d;
	text-align: center;
	font-weight: normal;
	font-size: 12px;
	}

	.content p {
	float: left;
	margin: 0;
	color: #888;
	}

	.content .green-button {
	float: right;
	display: block;
	margin: 0 0 0 10px;
	padding: 8px 0;
	width: 80px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #87b226;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
	}

	.content .green-button:hover {
	background: #7ea623;
	}

	.content .grey-button {
	float: right;
	display: block;
	margin: 0 0 0 10px;
	padding: 8px 0;
	width: 80px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #ddd;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
	}

	.content .grey-button:hover {
	background: #ccc;
	}

	.content ul.option {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	}

	.content .loading,
	.content .error {
	position: absolute;
	top: -30px;
	left: 140px;
	}

	.content .first {
	margin-top: 50px;
	}

	.content h6 {
	margin: 0;
	color: #888;
	text-align: center;
	font-weight: normal;
	font-size: 12px;
	}

	.content ul.option li {
	margin-bottom: 20px;
	}

	.content ul.option li:last-child {
	margin-bottom: 0;
	}

	.content ul.option li.error {
	display: none;
	}

	.content ul.option li input {
	padding: 5px;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
	letter-spacing: 1px;
	font: 12px/1 "Microsoft YaHei", Helvetica, Arial, sans-serif;
	}

	.content ul.option li input.sinput {
	width: 262px;
	}

	.content .loading {
	display: none;
	text-align: center;
	}

	.content .loading h5 {
	color: black;
	}