Chrome扩展开发：如何在活跃标签页生成确认弹窗？

• 核心原因：后台脚本（background.js）运行在无DOM的独立上下文，无法直接调用window.confirm，必须将弹窗逻辑注入到目标标签页的上下文执行。

• 步骤1：更新manifest.json权限
  需要添加scripting和tabs权限，确保可以注入脚本并访问标签页信息。示例Manifest V3配置：

  {
    "manifest_version": 3,
    "name": "你的扩展名称",
    "version": "1.0",
    "background": {
      "service_worker": "background.js"
    },
    "permissions": ["tabs", "scripting"],
    "host_permissions": ["<all_urls>"] // 按需限制目标网站，比如"https://*.example.com/*"
  }
  

• 步骤2：修改background.js代码
  使用chrome.scripting.executeScript将弹窗逻辑注入到当前活跃标签页，并可接收用户的确认结果：

  var notifyTimer = setInterval(func, 5 * 1000);
  console.log('setinterval ran');
  
  async function func() {
    let activeTab = await getCurrentTab();
    console.log(activeTab);
  }
  
  async function getCurrentTab() {
    let queryOptions = { active: true, lastFocusedWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    console.log(tab.url);
  
    try {
      // 注入弹窗代码到目标标签页
      const results = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: () => {
          // 此代码在标签页上下文执行，拥有完整window对象
          return window.confirm("请确认是否继续操作？");
        }
      });
  
      // 处理用户的确认结果
      if (results.length > 0) {
        const isConfirmed = results[0].result;
        console.log("用户确认状态：", isConfirmed);
        if (isConfirmed) {
          // 这里添加用户确认后的逻辑
          console.log("用户已确认，执行后续操作");
        } else {
          // 用户取消后的逻辑
          console.log("用户已取消操作");
        }
      }
    } catch (error) {
      console.error("注入脚本失败：", error);
    }
  
    return tab;
  }
  

• 关键说明：

  • chrome.scripting.executeScript的func参数会在目标标签页的上下文执行，因此可以直接调用window.confirm。
  • 可以通过返回值将用户的选择（true/false）传递回后台脚本，用于后续逻辑处理。
  • 若遇到权限错误，检查manifest中的host_permissions是否覆盖了目标标签页的URL。

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