版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38208401/article/details/82707750
1、简介
Chrome扩展是一系列文件的集合，一个web应用
需要的文件：
- 配置文件(manifest.json)
- 扩展图标(icon.png 可以是任意的名字，在配置文件中会使用到)
- popup弹出窗口html文件(popup.html)
- 静态资源文件(如images、css、js等)
2、Chrome扩展时钟Demo
1）编写配置文件manifest.json
{
"manifest_version": 2,//清单文件格式的版本，在Chrome18之后，都是2
"name": "我的时钟",//扩展名称
"version": "1.0",//扩展版本
"description": "我的第一个Chrome扩展",//扩展描述
"browser_action": {//扩展的图标放在Chrome的工具栏中
"default_icon": "images/16.png",//chrome工具栏的图标，一定要png图片
"default_title": "我的时钟",//鼠标悬停于扩展图标上所显示的文字
"default_popup": "popup.html"//单击扩展图标时所显示页面的文件位置
}
}
2）编写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> <!-- 引用js文件 -->
</body>
</html>
3）编写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);
4）扩展图标
固定png格式图片（可画板打开图片，点击重新调整图片大小，修改像素，另存为png）
3、调试
浏览器chrome://extensions/ 或 扩展程序中开启开发者模式 — 加载已解压的扩展程序 — 选择工程目录即可
效果：
