我的第一个chrome扩展(1)——读样例,实现时钟
学习chrome扩展开发:
与网页类似,需要的知识:html,javascript
chrome扩展程序的构成:
manifest.json:对扩展程序的整体描述文件
{ "manifest_version": 2, //manifest_version:默认为2,可不写
//在第2版manifest下chrome出于安全不会运行html内的js代码
"name": "我的时钟", "version": "1.0", "description": "我的第一个Chrome扩展", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "browser_action": { //指定扩展图标放在chrome工具栏中 "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "我的时钟", //当鼠标悬停时显示的信息 "default_popup": "popup.html" //单击图标时显示页面的文件位置 } }
//popup.html:
<html> <head> <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>
body中定义了一个id为clock_div的div容器显示当前时间
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);
结果:
remaining problem:
1.在manifest中调用一个js脚本,从而使鼠标移动到按钮上就显示时间,是否可行?
2.如何改变显示字体?
posted on 2015-05-18 20:10 giddens lee 阅读(294) 评论(0) 编辑 收藏 举报