使用Playwright无法检测Chrome应用商店的Add Extension弹窗

问题原因 #

Chrome应用商店点击“Add to Chrome”后弹出的“Add extension”确认框，是Chrome浏览器原生的权限弹窗，不属于网页DOM元素，也不会触发dialog或download事件，所以你的page层面监听捕获不到它。

解决方案 #

方案1：启动浏览器时直接允许安装目标扩展（推荐） #

直接在启动配置中添加扩展安装权限，跳过确认弹窗，这是最稳定高效的方式：

const getStoreBuild = async () => {
  const browser = await chromium.launchPersistentContext(testDataDist, {
    channel: 'chrome',
    headless: false,
    acceptDownloads: true,
    // 添加商店页面的权限，允许扩展自动安装
    permissions: ['https://chrome.google.com/webstore/*'],
    // 测试环境可额外添加参数增强兼容性
    args: ['--enable-extensions']
  })
  const page = await browser.newPage()
  await page.goto('https://chrome.google.com/webstore/detail/arc-cookie-exchange/apcedakaoficjlofohhcmkkljehnmebp');
  const addToChrome = page.locator('div[aria-label="Add to Chrome"]').first();
  await addToChrome.click({timeout: 10000});
  // 等待安装完成，确认移除按钮出现
  const removeBtn = page.locator('div[aria-label="Remove from Chrome"]');
  await removeBtn.waitFor();
  await browser.close();
}

await getStoreBuild()

方案2：监听浏览器上下文的弹窗页面并点击确认按钮 #

如果必须模拟手动点击弹窗的流程，可以通过监听浏览器上下文的新页面事件，捕获弹窗后定位按钮：

const getStoreBuild = async () => {
  const browser = await chromium.launchPersistentContext(testDataDist, {
    channel: 'chrome',
    headless: false,
    acceptDownloads: true,
  })
  const page = await browser.newPage()

  // 监听浏览器新弹出的页面
  browser.on('page', async (popupPage) => {
    // 等待弹窗加载，定位“Add extension”按钮（文本需匹配Chrome语言版本）
    const addExtensionBtn = popupPage.locator('button', { hasText: 'Add extension' });
    await addExtensionBtn.waitFor();
    await addExtensionBtn.click();
  })

  await page.goto('https://chrome.google.com/webstore/detail/arc-cookie-exchange/apcedakaoficjlofohhcmkkljehnmebp');
  const addToChrome = page.locator('div[aria-label="Add to Chrome"]').first();
  await addToChrome.click({timeout: 10000});
  
  const removeBtn = page.locator('div[aria-label="Remove from Chrome"]');
  await removeBtn.waitFor();
  await browser.close();
}

await getStoreBuild()

注意事项 #

• 方案1的permissions需匹配商店URL，确保权限范围正确；
• 方案2的按钮文本可能因Chrome语言版本变化，需根据实际环境调整定位器；
• 调试时保持headless: false，便于观察弹窗加载和交互流程。

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