我的第一个chrome扩展(1)——读样例,实现时钟

时间:2023-03-08 18:15:37
我的第一个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);

结果:我的第一个chrome扩展(1)——读样例,实现时钟

remaining problem:

1.在manifest中调用一个js脚本,从而使鼠标移动到按钮上就显示时间,是否可行?

2.如何改变显示字体?