如何从表单按钮执行脚本实现Chrome隐身窗口打开（新标签页扩展）

问题背景 #

我正在开发一款Chrome自定义主页/新标签页扩展，用HTML制作了多个跳转常用站点的“瓷砖”组件。现在想让其中一个瓷砖执行JavaScript代码打开Chrome隐身窗口，但尝试给表单/按钮添加onclick、onsubmit属性，以及通过表单ID绑定点击事件监听的方法均未成功，需要入门级的解决指导。

现有代码 #

瓷砖HTML结构 #

<form>
    <button formaction="https://UrlHere">
      <img src=".\AssetHere" />
      <label><span>Description here</span></label>
    </button>
</form>

引入的脚本 #

<script src="newInPrivate.js"></script>

解决步骤 #

Chrome扩展中操作窗口需要特定权限和官方API支持，按以下步骤操作即可实现：

1. 配置扩展权限（核心前提） #

在扩展的manifest.json文件中，必须声明"windows"权限，同时确保新标签页的配置正确。示例manifest.json结构：

{
  "manifest_version": 3,
  "name": "自定义新标签页",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "你的新标签页HTML文件名.html"
  },
  "permissions": ["windows"]
}

注：若使用Manifest V2，将manifest_version改为2即可，权限配置逻辑一致。

2. 修改特殊瓷砖的HTML #

将需要打开隐身窗口的瓷砖改为普通按钮，移除form标签（避免默认表单提交行为干扰JS逻辑）：

<button id="incognitoTile">
  <img src=".\AssetHere" />
  <label><span>打开隐身窗口</span></label>
</button>

3. 编写JavaScript逻辑（newInPrivate.js） #

在脚本中绑定按钮的点击事件，调用Chrome官方窗口创建API：

document.addEventListener('DOMContentLoaded', function() {
  const incognitoBtn = document.getElementById('incognitoTile');
  incognitoBtn.addEventListener('click', function() {
    // 创建隐身窗口，可指定打开的目标网址
    chrome.windows.create({
      url: "https://你要打开的网址.com", // 可选，留空则打开空白隐身页
      incognito: true
    });
  });
});

关键说明 #

• 普通JS无法直接在Chrome扩展中打开隐身窗口，必须使用官方提供的chrome.windows.createAPI，且需提前声明权限。
• 原表单的默认提交行为会优先触发，导致JS逻辑被打断，因此移除form标签是最直接的解决方式。

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