菜鸟-创作你的创作

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

lichongyang

下面给你整理一份 《Chrome Extension 开发定时任务插件全流程指南》，覆盖开发思路、核心 API、示例代码和注意事项，帮助你快速实现 Chrome 插件中的定时任务功能。

Chrome Extension 定时任务插件开发指南

在 Chrome Extension 中实现定时任务，常用于：

Chrome 提供 alarms API，可以在插件后台运行定时任务，无需依赖网页。

一、Chrome Extension 定时任务基础概念

概念说明
background script插件后台运行脚本，可持续监听事件和定时任务
content script注入到网页中的脚本，操作网页 DOM
alarms API定时任务 API，可设置单次或周期任务
manifest.json插件配置文件，声明权限、脚本和图标等

二、manifest.json 配置

Chrome Extension v3 推荐使用 Manifest V3：

{
  "manifest_version": 3,
  "name": "定时任务插件示例",
  "version": "1.0",
  "description": "Chrome Extension 定时任务插件",
  "permissions": [
    "alarms",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
}

关键点：

三、background.js 核心实现

1. 创建定时任务

// 创建周期性定时任务，每 5 分钟执行一次
chrome.alarms.create("myAlarm", {
  periodInMinutes: 5
});

// 创建一次性定时任务，10 分钟后执行
chrome.alarms.create("oneTimeAlarm", {
  delayInMinutes: 10
});

2. 监听定时任务

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === "myAlarm") {
    console.log("定时任务触发：每 5 分钟执行一次");
    doPeriodicTask();
  }
  if (alarm.name === "oneTimeAlarm") {
    console.log("一次性任务触发");
    doOneTimeTask();
  }
});

function doPeriodicTask() {
  // 这里写你的定时任务逻辑
  console.log("执行周期性任务，比如抓取数据");
}

function doOneTimeTask() {
  console.log("执行一次性任务");
}

四、popup.html 示例（可手动控制任务）

<!DOCTYPE html>
<html>
<head>
  <title>定时任务控制</title>
</head>
<body>
  <button id="start">启动定时任务</button>
  <button id="stop">停止定时任务</button>

  <script src="popup.js"></script>
</body>
</html>

五、popup.js 控制后台定时任务

document.getElementById("start").addEventListener("click", () => {
  chrome.alarms.create("myAlarm", { periodInMinutes: 5 });
  alert("定时任务已启动");
});

document.getElementById("stop").addEventListener("click", () => {
  chrome.alarms.clear("myAlarm", (wasCleared) => {
    if (wasCleared) alert("定时任务已停止");
  });
});

六、常见应用场景

  1. 定时抓取网页数据
    • 使用 fetch() 在后台获取数据
    • 存储到 chrome.storage.local
  2. 定时刷新标签页 chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.tabs.reload(tabs[0].id); });
  3. 定时提醒用户
    • 可结合 notifications API
    • 每隔固定时间弹出提醒

七、注意事项

  1. Manifest V3 background 脚本是 service_worker
    • 不支持长期常驻
    • 只能在事件触发时运行
    • alarms API 会唤醒 service worker
  2. Chrome 限制最小周期
    • periodInMinutes 最小为 1 分钟
    • 小于 1 分钟的定时任务可能不触发
  3. 持久存储
    • 定时任务的状态可用 chrome.storage 保存
    • 例如存储上次执行时间或任务状态
  4. 调试技巧
    • 打开 Chrome 扩展页面 → 点击 background page 查看日志
    • 使用 console.log() 追踪任务触发情况

八、完整插件目录结构示例

my-timer-extension/
│
├─ manifest.json
├─ background.js
├─ popup.html
├─ popup.js
├─ icon16.png
├─ icon48.png
└─ icon128.png

九、扩展功能建议

退出移动版