Chrome扩展开发：如何根据条件切换显示popup_1.html或popup_2.html？

针对你的需求，这里提供两种适配Chrome扩展Manifest V3（当前官方推荐版本）的可行方案：

方法一：通过Service Worker预先设置Popup #

这种方式会在扩展启动/安装阶段完成条件判断，用户点击扩展图标时直接打开对应页面，无跳转延迟。

1. 配置manifest.json
   移除action字段中的default_popup，添加后台Service Worker配置，若需读取本地存储数据需追加storage权限：

   {
     "manifest_version": 3,
     "name": "你的扩展名称",
     "version": "1.0",
     "action": {},
     "background": {
       "service_worker": "background.js"
     },
     "permissions": ["storage"] // 条件来自本地存储时需要此权限
   }
   

2. 编写background.js逻辑
   在后台脚本中监听扩展关键事件，根据条件设置对应Popup页面：

   // 封装条件判断与Popup设置逻辑
   async function setTargetPopup() {
     // 示例：从本地存储读取条件值，可替换为你的自定义判断逻辑
     const storageResult = await chrome.storage.local.get('yourConditionKey');
     const condition = storageResult.yourConditionKey ?? false; // 默认值设为false
   
     const popupUrl = condition ? 'popup_1.html' : 'popup_2.html';
     chrome.action.setPopup({ popup: popupUrl });
   }
   
   // 扩展安装时执行一次
   chrome.runtime.onInstalled.addListener(setTargetPopup);
   // 浏览器启动时执行一次
   chrome.runtime.onStartup.addListener(setTargetPopup);
   

方法二：通过主Popup页面跳转 #

这种方式无需后台脚本，先打开极简主Popup页面，再根据条件跳转至目标页面，适合简单场景。

1. 配置manifest.json
   指定主Popup为扩展入口：

   {
     "manifest_version": 3,
     "name": "你的扩展名称",
     "version": "1.0",
     "action": {
       "default_popup": "main_popup.html"
     }
   }
   

2. 创建main_popup.html
   作为跳转入口，内容极简：

   <!DOCTYPE html>
   <html>
   <head>
     <script src="popup_logic.js"></script>
   </head>
   <body></body>
   </html>
   

3. 编写popup_logic.js跳转逻辑
   页面加载完成后执行条件判断并跳转：

   document.addEventListener('DOMContentLoaded', async () => {
     // 替换为你的自定义条件，例如判断当前标签页URL、读取存储值等
     const condition = true; // 示例条件
   
     const targetUrl = condition ? 'popup_1.html' : 'popup_2.html';
     window.location.href = targetUrl;
   });
   

注意事项 #

• 确保popup_1.html和popup_2.html存放于扩展根目录，路径配置正确
• 若需根据当前打开页面判断条件，可使用chrome.tabs.query获取标签页信息后再执行逻辑

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