如何使用action.setPopup()实现Chrome扩展弹窗加载HTTPS网页内容？

我正在开发一款Chrome扩展，希望将HTTPS网页的内容显示在弹窗中。目前已在manifest.json中配置好默认弹窗，配置代码如下：

{
    "manifest_version": 3,
    "name": "My Rewards",
    "description": "Validate Identify",
    "version": "1.1",
    "permissions": [ 
        "identity",  "identity.email"
    ],
    "background": {
        "service_worker": "background.js"
      },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16":"/images/icons/myRewards16.png",
            "32":"/images/icons/myRewards32.png",
            "48":"/images/icons/myRewards48.png",
            "128":"/images/icons/myRewards128.png"
        }        
    },
    "icons":{
        "16":"/images/icons/myRewards16.png",
        "32":"/images/icons/myRewards32.png",
        "48":"/images/icons/myRewards48.png",
        "128":"/images/icons/myRewards128.png"
    }
}

查阅Chrome扩展文档得知可通过action.setPopup()方法实现，但我作为新手不清楚该方法的正确添加方式，恳请指导。

1. 核心前提说明 #

action.setPopup()用于动态替换扩展弹窗的内容，支持加载本地HTML文件或远程HTTPS网页。注意Manifest V3要求远程URL必须是HTTPS协议，且需提前在manifest中声明目标域名的权限。

2. 第一步：更新manifest.json #

添加目标HTTPS网站的权限到host_permissions字段，确保扩展有权限加载该网页：

{
    "manifest_version": 3,
    "name": "My Rewards",
    "description": "Validate Identify",
    "version": "1.1",
    "permissions": [ 
        "identity",  "identity.email"
    ],
    "host_permissions": [
        "https://your-target-site.com/*" // 替换为你要加载的HTTPS网站域名
    ],
    "background": {
        "service_worker": "background.js"
      },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16":"/images/icons/myRewards16.png",
            "32":"/images/icons/myRewards32.png",
            "48":"/images/icons/myRewards48.png",
            "128":"/images/icons/myRewards128.png"
        }        
    },
    "icons":{
        "16":"/images/icons/myRewards16.png",
        "32":"/images/icons/myRewards32.png",
        "48":"/images/icons/myRewards48.png",
        "128":"/images/icons/myRewards128.png"
    }
}

3. 第二步：在Service Worker中调用方法 #

在background.js中根据需求触发action.setPopup()，以下是两种常见场景：

场景1：扩展安装完成后直接替换弹窗

// background.js
chrome.runtime.onInstalled.addListener(() => {
    // 设置弹窗为目标HTTPS网页
    chrome.action.setPopup({
        popup: "https://your-target-site.com/path/to/page" // 替换为实际的HTTPS页面地址
    });
});

场景2：点击图标时动态切换弹窗

注意：如果配置了default_popup，chrome.action.onClicked事件不会触发，需先清除默认弹窗：

// background.js
// 先清除默认弹窗，让点击事件生效
chrome.action.setPopup({ popup: "" });

chrome.action.onClicked.addListener(() => {
    // 点击图标后设置弹窗为目标HTTPS网页
    chrome.action.setPopup({
        popup: "https://your-target-site.com/path/to/page"
    });
});

4. 关键注意点 #

• 远程URL必须是HTTPS，Chrome禁止加载HTTP内容作为弹窗。
• 若要恢复默认弹窗，调用chrome.action.setPopup({ popup: "popup.html" })即可。
• 如果不需要动态切换，也可以直接在action.default_popup中填写HTTPS URL，实现静态加载。

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