学习《Chrome扩展及应用开发》第一个简单的chrome扩展
源码
目录结构
+ demo1-Clock
+ images
- icon128.png
- icon48.png
- icon16.png
- icon38.png
- icon16.png
+ js
- my_clock.js
- manifest.json
- popup.html 清单文件 manifest.json
{
"manifest_version" : 2,
"name" : "小小时钟",
"version" : "0.1",
"description" : "demo1 - chrome时钟扩展",
"icons" : {
"16" : "images/icon16.png",
"48" : "images/icon48.png",
"128" : "images/icon128.png"
},
"browser_action" : {
"default_icon" : {
"19" : "images/icon19.png",
"38" : "images/icon38.png"
},
"default_title" : "小小时钟",
"default_popup" : "popup.html"
}
}页面 popup.html
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin:0;
padding: 0;
}
body{
width:200px;
height: 100px;
}
div{
line-height: 100px;
font-size: 42px;
text-align: center;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<script src="js/my_clock.js"></script>
</body>
</html>时间脚本 my_clock.js
function my_clock(el){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = m >= 10 ? m : ('0' + m);
s = s >= 10 ? s : ('0' + s);
el.innerHTML = h + ":" + m + ":" + s;
setTimeout(function(){ my_clock(el); }, 1000);
}
var clock_div = document.getElementById('clock_div');
my_clock( clock_div );加载即用
打开chrome浏览器扩展程序界面，点开开发者模式，选择加载已解压的扩展程序
