😏★,°:.☆(￣▽￣)/$:.°★ 😏
這篇文章主要介紹chrome擴展程序。
學其所用，用其所學。——梁啟超
歡迎來到我的博客，一起學習，共同進步。
喜歡的朋友可以關注一下，下次更新不迷路🥞
文章目錄
- :smirk:1. 擴展介紹
- :blush:2. 環境安裝與配置
- :satisfied:3. 應用示例
😏1. 擴展介紹
Chrome擴展程序（Chrome Extensions）是為Google Chrome瀏覽器設計的小型軟件程序，用于增強瀏覽器的功能或提供額外的服務。它們基于HTML、JavaScript和CSS技術開發，可通過Chrome網上應用商店（Chrome Web Store）安裝。
核心功能與特點
- 定制瀏覽體驗：擴展程序可以修改網頁內容、添加新功能或簡化操作流程。
- 輕量級設計：擴展程序通常體積小巧，運行時不占用過多系統資源。
- 權限可控：安裝時會明確告知所需權限，用戶可自主管理。
- 跨設備同步：登錄Google賬號后，擴展程序可在不同設備間同步。
常見類型
- 生產力工具：如廣告攔截器（uBlock Origin）、密碼管理器（LastPass）。
- 開發者工具：如JSON格式化工具、API測試插件（Postman）。
- 社交增強：如社交媒體快捷分享按鈕。
- 網頁美化：如暗黑模式插件（
Dark Reader）。
😊2. 環境安裝與配置
下面就自己寫一個chrome擴展，安裝直接在chrome瀏覽器加載即可。
另外，也可以打包自己的擴展程序為crx。
😆3. 應用示例
下面給出一個時間&積分計算器的示例：
包含以下代碼文件：
manifest.json
{"manifest_version": 3,"name": "Hello World Extension","version": "1.0","description": "A simple Chrome extension example","icons": {"16": "icons/test.png","48": "icons/test.png","128": "icons/test.png"},"action": {"default_popup": "popup.html","default_icon": "icons/test.png"},"permissions": []
}
popup.html
<!DOCTYPE html>
<html>
<head><title>Time & Points Tracker</title><link rel="stylesheet" href="popup.css">
</head>
<body><div class="container"><div class="funnel"><h2>Time Left</h2><div id="timeLeft">--:--:--</div></div><div class="points"><h2>Points Earned</h2><div id="pointsEarned">0</div></div></div><script src="popup.js"></script>
</body>
</html>
popup.js
// 時間段
const WORK_START_HOUR = 9;
const WORK_END_HOUR = 18;
const WORK_END_MINUTE = 30;
const TOTAL_POINTS = 10000;function updateDisplay() {const now = new Date();// --- 計算剩余時間 ---let endTime = new Date();endTime.setHours(WORK_END_HOUR, WORK_END_MINUTE, 0, 0);// 超出則顯示 00:00:00if (now >= endTime) {document.getElementById("timeLeft").textContent = "00:00:00";document.getElementById("pointsEarned").textContent = TOTAL_POINTS;return;}// 計算剩余時間 HH:MM:SSconst timeLeftMs = endTime - now;const hours = Math.floor(timeLeftMs / (1000 * 60 * 60));const minutes = Math.floor((timeLeftMs % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((timeLeftMs % (1000 * 60)) / 1000);document.getElementById("timeLeft").textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;// --- 計算已獲得積分 ---let startTime = new Date();startTime.setHours(WORK_START_HOUR, 0, 0, 0);// 未開始積分 = 0if (now < startTime) {document.getElementById("pointsEarned").textContent = "0";return;}// 計算總時長和已過去時長const totalWorkTimeMs = endTime - startTime;const elapsedTimeMs = now - startTime;// 積分計算const points = Math.floor((elapsedTimeMs / totalWorkTimeMs) * TOTAL_POINTS);document.getElementById("pointsEarned").textContent = Math.min(points, TOTAL_POINTS);
}// 初始加載時更新
updateDisplay();// 每秒刷新一次
setInterval(updateDisplay, 1000);
popup.css
body {width: 200px;padding: 15px;font-family: Arial, sans-serif;text-align: center;background: #f5f5f5;
}.container {display: flex;flex-direction: column;gap: 15px;
}.funnel, .points {background: white;padding: 10px;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}h2 {margin: 0 0 10px 0;font-size: 14px;color: #555;
}#timeLeft {font-size: 20px;font-weight: bold;color: #4285f4;
}#pointsEarned {font-size: 20px;font-weight: bold;color: #0f9d58;
}
以上。
