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 - 启用"开发者模式"
- 点击"加载已解压的扩展程序"选择项目目录
- 点击插件图标测试添加任务
扩展优化建议
- 添加任务删除功能
- 实现周期任务设置（每日/每周）
- 增加自定义任务类型（网页访问/脚本执行）
- 添加声音提醒选项