如何开发Chrome扩展：弹窗展示游戏网页倒计时并设置提醒

核心文件结构 #

your-extension/
├─ manifest.json       # 扩展配置
├─ background.js       # 后台定时检查+通知触发
├─ popup.html          # 弹窗UI
└─ popup.js            # 弹窗逻辑

1. 配置manifest.json #

声明必要权限和后台脚本，指定目标游戏网页的匹配规则：

{
  "manifest_version": 3,
  "name": "游戏倒计时提醒",
  "version": "1.0",
  "permissions": ["scripting", "storage", "notifications"],
  "host_permissions": ["https://your-game-url.com/*"], // 替换成游戏网页实际地址
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

2. 后台脚本background.js #

负责定时注入脚本抓取倒计时、解析剩余时间、触发提醒：

// 定时检查间隔（单位：秒，建议10-30秒，避免频繁请求）
const CHECK_INTERVAL = 15;

// 解析倒计时文本为剩余秒数（需根据游戏实际文本格式调整）
function parseCountdown(text) {
  // 示例：适配"剩余01:23:45"格式，解析成总秒数
  const [hours, minutes, seconds] = text.match(/\d+/g).map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

// 抓取并更新倒计时
async function fetchCountdown() {
  try {
    // 获取游戏网页标签
    const [tab] = await chrome.tabs.query({url: "https://your-game-url.com/*"});
    if (!tab) return;

    // 注入临时脚本获取页面倒计时文本
    const result = await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      func: () => {
        // 替换成游戏页面中倒计时元素的实际选择器
        const countdownEl = document.querySelector(".countdown-text");
        return countdownEl ? countdownEl.textContent.trim() : null;
      }
    });

    if (result[0]?.result) {
      const remainingSeconds = parseCountdown(result[0].result);
      // 存储最新倒计时
      await chrome.storage.local.set({remainingSeconds});
      
      // 剩余1分钟时触发桌面通知
      if (remainingSeconds <= 60 && remainingSeconds > 0) {
        chrome.notifications.create({
          type: "basic",
          iconUrl: "https://your-game-url.com/favicon.ico", // 可替换为自定义图标
          title: "物品领取提醒",
          message: "倒计时剩余1分钟，快去领取物品！"
        });
      }
    }
  } catch (err) {
    console.log("获取倒计时失败：", err);
  }
}

// 启动定时检查
setInterval(fetchCountdown, CHECK_INTERVAL * 1000);

// 初始化时立即检查一次
fetchCountdown();

3. 弹窗页面popup.html #

极简UI展示倒计时：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {width: 200px; padding: 15px; font-family: Arial;}
    .countdown {font-size: 18px; font-weight: bold; margin-top: 10px;}
  </style>
</head>
<body>
  <h3>物品领取倒计时</h3>
  <div class="countdown" id="countdown">加载中...</div>
  <script src="popup.js"></script>
</body>
</html>

4. 弹窗脚本popup.js #

从存储中读取并展示倒计时：

// 格式化秒数为时分秒格式
function formatSeconds(seconds) {
  const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
  const secs = (seconds % 60).toString().padStart(2, '0');
  return `${hours}:${minutes}:${secs}`;
}

// 更新弹窗显示内容
async function updatePopup() {
  const {remainingSeconds} = await chrome.storage.local.get("remainingSeconds");
  const countdownEl = document.getElementById("countdown");
  
  if (remainingSeconds !== undefined && remainingSeconds > 0) {
    countdownEl.textContent = formatSeconds(remainingSeconds);
  } else {
    countdownEl.textContent = "无有效倒计时";
  }
}

// 打开弹窗时立即更新
document.addEventListener('DOMContentLoaded', updatePopup);

关键注意事项 #

• 替换所有代码中的游戏网页地址为实际地址。
• 根据游戏页面的倒计时元素，调整background.js中的DOM选择器（document.querySelector(".countdown-text")）。
• 若游戏倒计时文本格式不是时分秒（比如"剩余5分钟"），需修改parseCountdown函数的解析逻辑适配。
• 测试时需在Chrome扩展页面开启开发者模式，加载已解压的扩展文件夹。

内容的提问来源于stack exchange，提问作者melon tea