😏★,°:.☆(￣▽￣)/$:.°★ 😏
这篇文章主要介绍chrome扩展程序。
学其所用，用其所学。——梁启超
欢迎来到我的博客，一起学习，共同进步。
喜欢的朋友可以关注一下，下次更新不迷路🥞
😏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:00
if (now >= endTime) {
document.getElementById("timeLeft").textContent = "00:00:00";
document.getElementById("pointsEarned").textContent = TOTAL_POINTS;
return;
}
// 计算剩余时间 HH:MM:SS
const 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);
// 未开始积分 = 0
if (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;
}
以上。