Chrome扩展弹窗自动关闭定时器设置及按钮颜色修改求助

一、核心代码修改 #

直接把你的点击事件改成下面这样，既解决自动关闭，又能根据codeWork的执行结果修改按钮颜色：

a.addEventListener("click", async () => {
  const button = document.getElementById("button");
  // 先把按钮设为初始白色
  button.style.backgroundColor = 'white';

  try {
    // 执行注入脚本并拿到返回结果
    const execResults = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: codeWork, // 这里必须传函数引用，不能传字符串
    });

    // 取出codeWork的返回值
    const taskResult = execResults[0].result;

    // 根据结果改按钮颜色：成功设绿色，失败设红色
    button.style.backgroundColor = taskResult?.success ? '#4CAF50' : '#f44336';

    // 任务完成后延迟1秒自动关弹窗，时间可以自己调整
    setTimeout(() => window.close(), 1000);
  } catch (err) {
    // 脚本执行出错时，按钮设红色，然后关闭弹窗
    console.error('脚本执行失败:', err);
    button.style.backgroundColor = '#f44336';
    setTimeout(() => window.close(), 1000);
  }
});

二、解决unsafe-eval错误 #

你之前触发的错误是因为可能尝试了传递字符串形式的代码给func参数，必须保证codeWork是一个明确定义的函数，比如：

// 正确写法：单独定义codeWork函数
function codeWork() {
  try {
    // 这里写你的业务逻辑，比如操作页面DOM或数据
    // 执行成功就返回带success:true的对象
    return { success: true, data: '任务完成' };
  } catch (error) {
    // 执行失败返回错误信息
    return { success: false, error: error.message };
  }
}

绝对不能用这种错误写法（会触发eval）：

// 错误：把代码写成字符串传给func
chrome.scripting.executeScript({
  target: { tabId: tab.id },
  func: "() => { /* 你的代码 */ }"
});

三、必要的权限配置 #

在扩展的manifest.json里要声明scripting和activeTab权限，否则脚本注入会失败：

{
  "permissions": ["scripting", "activeTab"]
}

注意点 #

• window.close()只能在用户触发的交互上下文里用（比如点击事件），这里完全符合要求。
• 注入的codeWork函数和弹窗的JS上下文是隔离的，它只能访问当前页面的变量和DOM，不能直接用弹窗里的变量。

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