如果不明白文件代表的意思,可以先看看我的另一篇博客
计算器效果图
总的架构图
http://blog.csdn.net/zxc_user/article/details/77369047
manifest.json
{
"manifest_version":2,
"name":"zxc-chrome",
"description":"my first chrome extension-browser action",
"version":"1.0",
"permissions":[
"https://*/*",
"http://*/*"
],
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<center>
<div style="" class="constant">
<font color="blue">计算器</font>
<hr/>
</div><br/>
<ul>
<li><button value="1" />1</li>
<li><button value="2" />2</li>
<li><button value="3" />3</li>
<li><button value="4" />4</li>
<li><button value="5" />5</li>
<li><button value="6" />6</li>
<li><button value="7" />7</li>
<li><button value="8" />8</li>
<li><button value="9" />9</li>
<li><button value="0" />0</li>
<li><button value="." />.</li>
</ul><br/><br/>
<div>
<input type="button" id="change" value="第一个输入框" />
<input type="text" id="left" class="select" size="8" >
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="right" size="8"><br/>
<input type="button" id="clear" value="清空填入数据"/>
<input type="submit" id="submit" value="获取结果">
<font size="5"><span id="result"></span></font>
</div>
</center>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</html>
popup.js
document.write(" <script language=\"javascript\" src=\"js\/\jquery.js\" > <\/script>");
function operator(i, operator, j) {
i = Number(i);
j = Number(j);
if("+" == operator) return i + j;
if("-" == operator) return i - j;
if("*" == operator) return i * j;
if("/" == operator) return i / j;
return "no operator";
}
$("#submit").click(function(event) {
var result = operator($("#left").val(), $("#operator").val(), $("#right").val());
alert("结果为:" + result);
$("span#result").html(" result: " + result);
});
$("ul>li>button").click(function(){
$("input.select").val($("input.select").val() + $(this).val());
})
$("#change").click(function(){
if($("#left").hasClass("select")) {
$("#left").removeClass("select");
$("#right").addClass("select");
$(this).val("第二个输入框");
} else {
$("#right").removeClass("select");
$("#left").addClass("select");
$(this).val("第一个输入框");
}
})
$("#clear").click(function(){
$("#left").val("");
$("#right").val("");
});
base.css
body {
min-width: 100px;
overflow-x: hidden;
width: 550px;
height: 180px;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
select {
height: 22px;
}
#change {
height: 22px;
}
ul li {
float: left;
list-style: none;
margin-left: 6px;
}
ul li button {
height: 20px;
width: 35px;
}
好了,到这里就是我的第一个最简单的Chrome插件