如何在Chrome扩展的popup弹窗内打开另一个HTML弹窗文件？

• Manifest V3 已废弃chrome.browserActionAPI，统一替换为chrome.action，且该API的openPopup方法仅能打开扩展默认的action弹窗，不支持自定义指定其他HTML文件
• 不需要调用chrome.scripting.executeScript往当前页面注入内容脚本，扩展的popup页面本身有权限调用Chrome扩展的核心API，无需通过内容脚本中转
• 内容脚本的运行上下文是网页的隔离环境，没有权限调用chrome.action类的扩展核心API，即使写了也会执行报错

1. 前置准备 #

确保你已经在扩展根目录创建了git_popup.html文件，编写你需要展示的自定义内容即可。

2. 替换popup.js全部代码 #

const gitSheet = document.getElementById("git_Sheet");

gitSheet.addEventListener("click", () => {
  // 打开独立小窗口加载自定义的git_popup.html
  chrome.windows.create({
    url: "git_popup.html",
    type: "popup",
    width: 600, // 可自定义窗口宽度
    height: 400 // 可自定义窗口高度
  });
});

3. 可选优化manifest.json #

你现有的manifest.json已经满足运行要求，如果你没有其他功能需求，可以删掉多余的权限申请，降低扩展权限风险：

{
  "name": "CheatSheets",
  "description": "cheatsheet extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

如果你不想打开独立窗口，想要在当前网页内悬浮展示内容，可以把git_popup.html的内容封装为DOM结构，通过内容脚本注入到当前页面中悬浮展示即可。

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