Chrome扩展开发：实现访问指定网站时自动弹出popup

Chrome 出于防骚扰、安全交互的策略要求，从Manifest V2后期开始就彻底封禁了所有通过代码主动触发扩展原生popup弹出的能力，不存在任何官方API可以绕过这个限制。你观察到Honey等购物扩展实现的"访问站点自动弹优惠面板"效果，本质不是真的唤起了浏览器原生的扩展popup，而是在页面内注入了和扩展popup视觉、功能完全一致的自定义浮层，用户感知不到和原生popup的区别。

• chrome.action 全量API没有提供模拟点击扩展图标、主动打开popup的方法，公开资料里提到的安全限制是真实存在的
• 你Manifest里写的_execute_browser_action是Manifest V2的废弃字段，V3对应快捷键触发popup的字段是_execute_action，就算修正字段，这个API也只能响应用户主动按下快捷键的操作，不能由扩展代码主动调用触发。

不需要纠结唤起原生popup，直接复用你已经开发完成的popup业务逻辑，通过内容脚本注入页面浮层即可，实现步骤：

• 把popup页面的HTML、CSS、业务逻辑抽离成可复用的公共模块
• 在内容脚本里加域名判断逻辑，检测到当前访问的是flipkart等目标购物站点时，通过Shadow DOM把优惠面板挂载到当前页面，避免被站点本身的全局样式污染
• 给注入的面板配置和原生popup完全一致的样式：固定定位在浏览器右上角扩展图标下方位置、相同的圆角、阴影、内边距，视觉上和原生popup弹出效果完全一致
• 保留原有原生popup的逻辑，用户点击扩展图标时依然可以正常打开popup，两套逻辑复用同一套业务代码，不需要重复开发
• 可选优化：检测到目标站点时，通过chrome.action.setBadgeText给扩展图标设置红色提示角标，告知用户当前站点有可用优惠，和浮层提示形成体验互补。

你当前使用的Manifest V3文件存在几处写法错误，修正后参考如下：

{
  "name": "SaveMore",
  "description": "Know the best offers available",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/logo16.png",
      "32": "/images/logo32.png",
      "48": "/images/logo48.png",
      "128": "/images/logo128.png"
    }
  },
  "icons": {
    "16": "/images/logo16.png",
    "32": "/images/logo32.png",
    "48": "/images/logo48.png",
    "128": "/images/logo128.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*.flipkart.com/*"],
      "js": ["app.js"],
      "run_at": "document_idle"
    }
  ],
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y"
      }
    }
  }
}

注意：不建议给content_scripts配置<all_urls>匹配规则，只匹配你实际需要覆盖的购物站点即可，减少不必要的权限申请，也能降低扩展被Chrome应用商店驳回的概率。

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