如何通过Chrome扩展调用Chrome应用模式打开网页或本地页面？

阿华AIGC实验室

2026-5-22

如何通过Chrome扩展以应用模式打开页面

嘿，这个需求其实用Chrome自带的扩展API就能轻松实现，完全不需要手动敲命令行～核心就是用chrome.windows.create() API，它支持直接指定窗口类型为应用模式，效果和你提到的--app命令行参数一模一样。

下面是具体的实现步骤，我用Manifest V3（现在Chrome扩展的标准版本）来举例：

1. 配置扩展权限清单（manifest.json）

首先，你需要在manifest.json里添加windows权限，让扩展拥有创建新窗口的权限，同时配置弹窗入口：

{
  "manifest_version": 3,
  "name": "应用模式启动器",
  "version": "1.0",
  "permissions": ["windows"],
  "action": {
    "default_popup": "popup.html"
  }
}

如果你的需求是打开用户本地文件（不是扩展内置页面），还需要额外添加主机权限：

"host_permissions": ["file://*/*"]

2. 编写弹窗界面与点击逻辑

先做一个简单的弹窗页面popup.html，放一个触发按钮：

<!DOCTYPE html>
<html>
<body style="width: 180px; padding: 15px;">
  <button id="launchAppBtn" style="width: 100%; padding: 8px;">以应用模式打开页面</button>
  <script src="popup.js"></script>
</body>
</html>

然后在popup.js里写按钮的点击事件，调用API创建应用模式窗口：

document.getElementById('launchAppBtn').addEventListener('click', () => {
  // 场景1：打开在线网页（比如Google）
  chrome.windows.create({
    url: "https://google.com",
    type: "app", // 核心参数：指定为应用模式
    width: 800,  // 可选：自定义窗口宽度
    height: 600  // 可选：自定义窗口高度
  });

  // 场景2：打开扩展内置的本地页面（比如你开发的page.html）
  // chrome.windows.create({
  //   url: chrome.runtime.getURL("page.html"),
  //   type: "app",
  //   width: 800,
  //   height: 600
  // });

  // 场景3：打开用户本地文件（需提前配置host_permissions）
  // chrome.windows.create({
  //   url: "file:///C:/Users/xxx/Documents/test.html",
  //   type: "app",
  //   width: 800,
  //   height: 600
  // });
});

关键注意点

type: "app"是实现应用模式的核心，它会让Chrome创建一个完全移除工具栏（地址栏、书签栏都消失）的窗口，和命令行--app参数效果一致，比Kiosk模式更灵活。
如果是扩展内置的页面，必须用chrome.runtime.getURL()获取正确路径，避免出现加载错误。
测试时，直接在Chrome扩展管理页面加载已解压的扩展包，点击扩展图标就能看到弹窗，点击按钮就会弹出应用模式窗口啦～

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