Chrome扩展onUpdated监听触发无限刷新，需域名持久化存储方案

核心问题原因 #

service worker会因浏览器资源回收机制休眠重启，content script在页面刷新时会重新注入，两者内存中的变量都会被重置，导致无法通过内存存储记录已处理的域名，进而触发无限递归刷新。

解决方案：使用Chrome存储API #

Chrome提供了chrome.storage系列API，可实现跨脚本、持久化的数据存储，其中：

• chrome.storage.session：浏览器会话期间有效（关闭浏览器后数据清空），适合仅需在当前浏览器运行周期内避免重复操作的场景。
• chrome.storage.local：永久存储（除非手动清除扩展数据），适合需要跨浏览器会话保留记录的场景。

以下以chrome.storage.session为例给出实现步骤：

1. 配置扩展权限 #

在manifest.json中添加storage权限：

{
  "permissions": ["storage", "tabs"],
  // 其他扩展配置项
}

2. 修改service_worker.js逻辑 #

在发送消息前检查存储中的已处理域名列表，仅对未处理的域名执行操作：

// 辅助函数：从URL提取域名
function getDomainFromUrl(url) {
  try {
    return new URL(url).hostname;
  } catch (e) {
    return '';
  }
}

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url) {
    const domain = getDomainFromUrl(tab.url);
    if (!domain) return;

    // 可选：仅针对特定域名执行操作，添加白名单
    const targetDomains = ['example.com', 'your-target-domain.com'];
    if (!targetDomains.includes(domain)) return;

    // 从session存储获取已处理域名列表
    const { processedDomains = [] } = await chrome.storage.session.get('processedDomains');
    
    // 若该域名未被处理过，才执行后续操作
    if (!processedDomains.includes(domain)) {
      // 发送消息给content script
      chrome.tabs.sendMessage(tabId, { tabId, url: tab.url, domain });
      
      // 更新存储，标记该域名已处理
      processedDomains.push(domain);
      await chrome.storage.session.set({ processedDomains });
    }
  }
});

3. 优化content_script.js（可选） #

由于service worker已完成前置判断，content script可直接执行刷新逻辑，无需重复检查：

chrome.runtime.onMessage.addListener(({ tabId, url, domain }, sender, response) => {
  window.location.href = url;
});

注意事项 #

• 若需要跨浏览器会话保留已处理记录，将chrome.storage.session替换为chrome.storage.local即可，逻辑完全一致。
• 存储的processedDomains数组可根据需求定期清理（比如添加过期逻辑），避免数据无限累积。

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