Chrome扩展仅在检查弹窗时才可保存用户名问题求助

你的eBay黑名单扩展出现「仅Inspect弹窗后才能保存用户名」的问题，核心原因是Chrome扩展Popup的生命周期特性，加上代码里的几个逻辑bug，我来帮你一步步修复：

一、核心问题：Popup页面的生命周期 #

Chrome的Popup页面在用户点击外部或主动关闭时会立即销毁，而你的代码里在执行chrome.storage.sync.get这类异步操作后，直接调用window.close()——这会导致异步的chrome.storage.sync.set还没完成，Popup就被销毁，存储操作直接中断。而打开Inspect Popup时，浏览器会强制保持Popup页面存活，异步操作能完整执行，这就是为什么只有Inspect后才能成功保存。

二、具体代码修复 #

1. 修复Popup.js的存储逻辑（解决保存/删除失败问题） #

先修正几个关键bug，同时优化异步操作的执行顺序：

（1）Set按钮：修复重复判断逻辑+调整窗口关闭时机

原来的循环会覆盖exists的值，导致即使数组里已有该用户名，只要最后一个元素不匹配就会误判。同时把window.close()移到存储完成的回调里，确保存储操作执行完毕：

document.getElementById("set").onclick = function() {
  var inputVal = document.getElementById("text").value.trim();
  if (!inputVal) {
    alert("请输入用户名！");
    return;
  }

  chrome.storage.sync.get("data", function(items) {
    let blacklist = items.data || [];
    // 检查是否已存在，找到匹配项就停止遍历
    const exists = blacklist.some(username => username === inputVal);
    
    if (exists) {
      alert('Username already exists!');
      return;
    }

    // 添加新用户名并存储，完成后再关闭窗口
    blacklist.push(inputVal);
    chrome.storage.sync.set({ "data": blacklist }, function() {
      alert('Username added!!!');
      window.close();
    });
  });
}

（2）Delete按钮：修复循环越界+简化查找逻辑

原来的index - 1 < length会导致循环多执行一次，出现数组越界。改用findIndex更简洁高效：

document.getElementById("delete").onclick = function() {
  var deleteVal = document.getElementById("toDelete").value.trim();
  if (!deleteVal) {
    alert("请输入要删除的用户名！");
    return;
  }

  chrome.storage.sync.get("data", function(items) {
    let blacklist = items.data || [];
    const indexToDelete = blacklist.findIndex(username => username === deleteVal);
    
    if (indexToDelete === -1) {
      alert("Username not found!");
      return;
    }

    // 删除并存储，完成后关闭窗口
    blacklist.splice(indexToDelete, 1);
    chrome.storage.sync.set({ "data": blacklist }, function() {
      alert(`Username "${deleteVal}" deleted!`);
      window.close();
    });
  });
}

（3）Clear按钮：调整窗口关闭时机

保持和其他操作一致，在清除完成后再关闭窗口：

document.getElementById("clear").onclick = function() {
  chrome.storage.sync.clear(function() {
    alert("All usernames deleted!");
    window.close();
  });
}

（4）页面加载显示优化

原来的文本显示太紧凑，改成换行展示每个用户名，同时处理空列表的情况：

document.body.onload = function() {
  chrome.storage.sync.get("data", function(items) {
    const blacklist = items.data || [];
    const dataElement = document.getElementById("data");
    dataElement.innerHTML = blacklist.length 
      ? blacklist.join("<br>") 
      : "暂无黑名单用户名";
  });
}

2. 修复Content.js的稳定性问题 #

原来的用户名获取方式太脆弱，且没有处理元素不存在的情况，同时setInterval会重复创建导致内存泄漏：

// 安全获取卖家用户名，处理元素不存在的情况
function getEbayUsername() {
  const sellerElement = document.querySelector('#RightSummaryPanel .mbg-nw');
  return sellerElement ? sellerElement.textContent.trim() : null;
}

const ebayUsername = getEbayUsername();
if (ebayUsername) {
  console.log("当前卖家用户名:", ebayUsername);
  
  chrome.storage.sync.get("data", function(items) {
    const blacklist = items.data || [];
    if (blacklist.includes(ebayUsername)) {
      const body = document.querySelector('body');
      if (!body) return;

      const defaultBg = body.style.backgroundColor || window.getComputedStyle(body).backgroundColor;
      let flashCount = 0;
      const flashInterval = setInterval(() => {
        if (flashCount < 4) {
          body.style.backgroundColor = flashCount % 2 === 0 ? "#ff3030" : defaultBg;
          body.style.transition = "background-color 0.5s ease";
          flashCount++;
        } else {
          clearInterval(flashInterval); // 清除定时器，避免内存泄漏
          body.style.backgroundColor = "#ffcccc";
        }
      }, 400);
    }
  });
}

3. Manifest.json的小调整（可选） #

给content脚本加上run_at: document_idle，确保页面加载完成后再执行，避免找不到元素：

{
  "manifest_version": 2,
  "name": "eBay Blacklist",
  "version": "2.1",
  "content_scripts": [
    {
      "matches": ["*://*.ebay.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "browser_action": {
    "default_icon": "CLAYTON-emoji.png",
    "default_title": "eBay Blacklist",
    "default_popup": "popup.html"
  },
  "permissions": ["storage"]
}

三、测试验证 #

修复后，直接点击Popup的Set按钮，不需要Inspect就能正常保存用户名到黑名单，商品页也能正常触发闪红警示。

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