Chrome拓展（Chrome Extension）开发定时任务插件

Chrome扩展定时任务插件开发指南

核心实现原理

1. 使用Chrome Alarms API实现定时触发
2. 通过Service Worker保持后台运行
3. 本地存储保存任务配置

开发步骤

1. 创建manifest文件 (manifest.json)

{
  "manifest_version": 3,
  "name": "定时任务助手",
  "version": "1.0",
  "permissions": ["alarms", "storage", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 后台服务脚本 (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: [] });
    }
  });
});

3. 弹出页面实现 (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>

4. 任务管理脚本 (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 => 
    `
${task.name} - ${task.time}`
  ).join('');
}

// 初始化加载任务
loadTasks();

关键技术点

1. Alarms API 使用：

   • chrome.alarms.create() 创建定时器
   • chrome.alarms.onAlarm 监听触发事件

2. 时间计算：
   将用户输入时间转换为时间戳：
   $$\text{触发时间}=\text{当前日期}+\text{指定小时分钟}$$

3. 数据存储：

   • 使用chrome.storage.local持久化存储任务
   • 数据格式：

   {
     "tasks": [
       {"name": "晨间提醒", "time": "08:00"},
       {"name": "午间休息", "time": "12:30"}
     ]
   }
   

测试方法

1. 在Chrome地址栏输入chrome://extensions
2. 启用"开发者模式"
3. 点击"加载已解压的扩展程序"选择项目目录
4. 点击插件图标测试添加任务

扩展优化建议

1. 添加任务删除功能
2. 实现周期任务设置（每日/每周）
3. 增加自定义任务类型（网页访问/脚本执行）
4. 添加声音提醒选项