Chrome扩展首次页面加载时无法检测已安装PWA问题求解

现有方案的缺陷原因 #

• 首次安装PWA打开检测失效：你配置了run_at: document_start，脚本在页面渲染最早阶段执行，此时Chrome还未完成PWA窗口的display-mode状态赋值，初始状态仍为browser，同步检测自然失效。
• 星巴克PWA无法识别：该PWA启用了窗口控制叠加层特性，对应的display-mode值为window-controls-overlay，不在你现有检测的三个枚举值范围内，所以识别失败。

修复方案 #

方案1：页面端检测优化（无额外权限要求） #

直接替换你现有的检测逻辑即可，覆盖两种异常场景：

// 覆盖所有可能的PWA display-mode值
const pwaDisplayModes = ['standalone', 'fullscreen', 'minimal-ui', 'window-controls-overlay']
let isPWA = pwaDisplayModes.some(mode => window.matchMedia(`(display-mode: ${mode})`).matches)

// 监听display-mode变化，兜底首次启动延迟赋值场景
const displayModeListener = (e) => {
  const matchRes = e.media.match(/\(display-mode: (\w+)\)/)
  if (matchRes && pwaDisplayModes.includes(matchRes[1]) && e.matches) {
    isPWA = true
    // 可在此处补充已经执行逻辑的回滚操作
  }
}
pwaDisplayModes.forEach(mode => {
  window.matchMedia(`(display-mode: ${mode})`).addEventListener('change', displayModeListener)
})

// 延迟100ms二次检测，兜底所有场景
setTimeout(() => {
  isPWA = isPWA || pwaDisplayModes.some(mode => window.matchMedia(`(display-mode: ${mode})`).matches)
  if (!isPWA) {
    // 此处放置扩展原有的执行逻辑
  }
}, 100)

方案2：后台窗口检测（准确率100%） #

Chrome扩展可直接通过系统API判断当前窗口是否为独立PWA窗口，不受页面状态影响，是最可靠的方案：

1. 首先在manifest.json中注册后台服务worker（如果还没注册的话）：

"background": {
  "service_worker": "serviceWorker.js"
}

2. 内容脚本中发送消息请求后台检测：

chrome.runtime.sendMessage({action: 'checkIsPWA'}, (res) => {
  if (res.isPWA) return
  // 此处放置扩展原有的执行逻辑
})

3. 新建serviceWorker.js添加消息监听逻辑：

chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
  if (req.action === 'checkIsPWA') {
    // PWA独立窗口的type固定为app
    chrome.windows.get(sender.tab.windowId, (win) => sendResponse({isPWA: win.type === 'app'}))
    // 异步响应必须返回true
    return true
  }
})

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