Chrome擴充套件程式開發之時鐘Demo
阿新 • • 發佈：2018-12-12
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/ 或 擴充套件程式中開啟開發者模式 — 載入已解壓的擴充套件程式 — 選擇工程目錄即可
效果：
