【JS】认识并实现一个chrome扩展程序
😏★,°:.☆(￣▽￣)/$:.°★ 😏
这篇文章主要介绍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;
}
以上。