我的第一个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.如何改变显示字体?

原文地址:https://www.cnblogs.com/giddens/p/4512961.html