Chrome扩展后台持续循环运行问题及Manifest V3迁移求助

一、现有代码核心问题 #

1. Manifest V2 配置错误 #

• background字段错误引入了popup.js（弹窗专属脚本）和payload.js（页面注入脚本），后台脚本应为独立逻辑文件，而非弹窗或注入类脚本。
• persistent: true未生效是因为后台无持续运行的逻辑，实际监控逻辑被放在页面注入脚本中，而非后台上下文。

2. payload.js 逻辑错误 #

• while(true)会直接阻塞JS线程，导致浏览器页面卡死，无法正常执行后续逻辑。
• JS中不存在Thread.Sleep(2)语法（这是Java写法），需用setTimeout或setInterval实现延迟。
• 变量result用var声明存在提升问题，且未初始化合理初始值。
• note1.mp3未在web_accessible_resources中声明，会导致音频加载失败。

3. popup.js 逻辑冗余 #

• 无需通过chrome.extension.getBackgroundPage()调用tabs.executeScript，直接调用即可。
• 每次弹窗打开都会重复注入payload.js，导致多个监控实例同时运行。

二、Manifest V2 实现后台持续监控的修复步骤 #

1. 重构 Manifest.json #

将background脚本改为独立的background.js，移除错误引入的文件：

{
  "manifest_version": 2,
  "name": "csgoroll notificador",
  "description": "Scrap",
  "version": "1.0",
  "author": "me",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "web_accessible_resources": [
    "note.mp3",
    "note1.mp3",
    "Sin.png"
  ],
  "permissions": [
    "tabs",
    "notifications",
    "http://*/",
    "https://*/"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

2. 新增 background.js 后台逻辑 #

后台负责管理页面注入和监控状态，避免重复注入：

// 记录已注入的标签页ID
const injectedTabs = new Set();

// 监听标签页更新，确保目标页面加载完成后注入脚本
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 替换为你需要监控的目标网站域名
  if (tab.url.includes("csgoroll.com") && changeInfo.status === "complete" && !injectedTabs.has(tabId)) {
    chrome.tabs.executeScript(tabId, { file: 'payload.js' }, () => {
      injectedTabs.add(tabId);
    });
  }
});

// 监听标签页关闭，移除记录
chrome.tabs.onRemoved.addListener((tabId) => {
  injectedTabs.delete(tabId);
});

// 接收页面脚本的消息，转发给弹窗
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  chrome.runtime.sendMessage(message);
});

3. 修复 payload.js 监控逻辑 #

用setInterval替代死循环，修复延迟和变量问题：

let result = "0"; // 初始化合理初始值

// 每2秒执行一次监控
setInterval(() => {
  let result2 = "";
  const somethings2 = document.getElementsByClassName("currency-value ng-star-inserted");
  for (let i = 0; i < somethings2.length; i++) {
    result2 += somethings2[i].textContent;
  }
  result2 = result2.substring(0, 2);

  if (result2 > result) {
    playAudio('note.mp3');
    result = result2;
  } else if (result2 < result) {
    playAudio('note1.mp3');
    result = result2;
  }

  chrome.runtime.sendMessage(result2);
}, 2000); // 2000ms = 2秒

// 封装音频播放函数
function playAudio(audioName) {
  const url = chrome.runtime.getURL(audioName);
  const audio = new Audio(url);
  audio.play().catch(err => console.error("音频播放失败:", err));
}

4. 简化 popup.js #

移除冗余逻辑，仅保留消息监听：

window.addEventListener('load', () => {
  // 监听后台转发的消息
  chrome.runtime.onMessage.addListener((message) => {
    document.getElementById('json-content').innerHTML = message;
  });
});

三、迁移至 Manifest V3 的步骤 #

1. 重构 Manifest.json #

V3 中用service_worker替代background.scripts，并调整权限和资源配置：

{
  "manifest_version": 3,
  "name": "csgoroll notificador",
  "description": "Scrap",
  "version": "1.0",
  "author": "me",
  "background": {
    "service_worker": "background.js"
  },
  "web_accessible_resources": [{
    "resources": ["note.mp3", "note1.mp3", "Sin.png"],
    "matches": ["<all_urls>"]
  }],
  "permissions": ["tabs", "notifications"],
  "host_permissions": ["http://*/", "https://*/"],
  "action": {
    "default_popup": "popup.html"
  }
}

• 注意：V3 移除了persistent字段，Service Worker 为事件驱动，会自动休眠但需用时唤醒。
• browser_action改为action，permissions和host_permissions分离配置。

2. 适配 background.js 为 Service Worker #

V3 中 Service Worker 无DOM环境，部分API有变化：

const injectedTabs = new Set();

// 监听标签页更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (tab.url?.includes("csgoroll.com") && changeInfo.status === "complete" && !injectedTabs.has(tabId)) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['payload.js']
    }).then(() => {
      injectedTabs.add(tabId);
    }).catch(err => console.error("注入脚本失败:", err));
  }
});

// 监听标签页关闭
chrome.tabs.onRemoved.addListener((tabId) => {
  injectedTabs.delete(tabId);
});

// 消息转发
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  chrome.runtime.sendMessage(message);
});

• chrome.tabs.executeScript改为chrome.scripting.executeScript，该API权限已隐含在host_permissions中，无需额外配置。

3. 其他注意事项 #

• V3 中页面注入脚本（payload.js）无需修改，保持修复后的版本即可。
• 若需后台持续运行逻辑，可通过setInterval或事件触发，但Service Worker长时间无事件会被休眠，不推荐滥用定时唤醒。

内容的提问来源于stack exchange，提问作者Josu Whynot