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/ 或 擴展程序中開啓開發者模式 — 加載已解壓的擴展程序 — 選擇工程目錄即可
效果：
