Chrome扩展定时任务插件开发指南
核心实现原理
- 使用Chrome Alarms API实现定时触发
- 通过Service Worker保持后台运行
- 本地存储保存任务配置
开发步骤
- 创建manifest文件 (manifest.json)
{"manifest_version": 3,"name": "定时任务助手","version": "1.0","permissions": ["alarms", "storage", "notifications"],"background": {"service_worker": "background.js"},"action": {"default_popup": "popup.html"}
}
- 后台服务脚本 (background.js)
// 监听定时器事件
chrome.alarms.onAlarm.addListener((alarm) => {chrome.notifications.create({type: 'basic',iconUrl: 'icon.png',title: '任务提醒',message: `执行任务：${alarm.name}`});
});// 初始化存储数据
chrome.runtime.onInstalled.addListener(() => {chrome.storage.local.get(['tasks'], (result) => {if (!result.tasks) {chrome.storage.local.set({ tasks: [] });}});
});
- 弹出页面实现 (popup.html)
<!DOCTYPE html>
<div style="width: 300px; padding: 15px"><h3>定时任务管理</h3><form id="taskForm"><input type="text" id="taskName" placeholder="任务名称" required><input type="time" id="taskTime" required><button type="submit">添加任务</button></form><div id="taskList"></div>
</div>
<script src="popup.js"></script>
- 任务管理脚本 (popup.js)
document.getElementById('taskForm').addEventListener('submit', async (e) => {e.preventDefault();const taskName = document.getElementById('taskName').value;const taskTime = document.getElementById('taskTime').value;// 创建定时任务const [hours, minutes] = taskTime.split(':');const when = new Date().setHours(hours, minutes, 0, 0);chrome.alarms.create(taskName, { when });// 保存到本地存储const { tasks } = await chrome.storage.local.get(['tasks']);tasks.push({ name: taskName, time: taskTime });await chrome.storage.local.set({ tasks });// 刷新任务列表loadTasks();
});async function loadTasks() {const { tasks } = await chrome.storage.local.get(['tasks']);const list = document.getElementById('taskList');list.innerHTML = tasks.map(task => `<div>${task.name} - ${task.time}</div>`).join('');
}// 初始化加载任务
loadTasks();
关键技术点
-
Alarms API 使用：
chrome.alarms.create()创建定时器chrome.alarms.onAlarm监听触发事件
-
时间计算：
将用户输入时间转换为时间戳：
触发时间 = 当前日期 + 指定小时分钟 \text{触发时间} = \text{当前日期} + \text{指定小时分钟} 触发时间=当前日期+指定小时分钟 -
数据存储：
- 使用
chrome.storage.local持久化存储任务 - 数据格式：
{"tasks": [{"name": "晨间提醒", "time": "08:00"},{"name": "午间休息", "time": "12:30"}] } - 使用
测试方法
- 在Chrome地址栏输入
chrome://extensions - 启用"开发者模式"
- 点击"加载已解压的扩展程序"选择项目目录
- 点击插件图标测试添加任务
扩展优化建议
- 添加任务删除功能
- 实现周期任务设置（每日/每周）
- 增加自定义任务类型（网页访问/脚本执行）
- 添加声音提醒选项
