如何在Chrome无痕模式新标签页中POST提交HTML表单

首先明确：受浏览器安全沙箱限制，普通网页的原生JavaScript没有权限直接打开无痕窗口并提交POST表单，仅可通过两种方式实现需求：

方案1：Chrome扩展实现（唯一可自动化的方案） #

该方案可以实现用户点击提交按钮后自动打开无痕窗口并完成表单提交，步骤如下：

1. 准备Chrome扩展的核心文件
   首先创建manifest.json扩展配置文件，声明所需权限：

{
  "manifest_version": 3,
  "name": "表单无痕提交工具",
  "version": "1.0",
  "permissions": ["tabs", "activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["你部署表单的域名/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. 编写注入到表单页面的content.js，监听表单提交事件：

// 阻止表单默认提交行为，把数据传给扩展后台
document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  const formData = Object.fromEntries(new FormData(e.target).entries());
  chrome.runtime.sendMessage({
    actionUrl: e.target.action,
    formData: formData
  });
});

3. 编写扩展后台逻辑background.js，创建无痕窗口并提交表单：

chrome.runtime.onMessage.addListener(async (msg) => {
  // 创建无痕窗口
  const incognitoWin = await chrome.windows.create({
    incognito: true,
    url: 'about:blank'
  });
  const targetTab = incognitoWin.tabs[0].id;
  // 往无痕窗口注入脚本提交POST表单
  await chrome.scripting.executeScript({
    target: { tabId: targetTab },
    func: (submitUrl, data) => {
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = submitUrl;
      Object.entries(data).forEach(([key, value]) => {
        const input = document.createElement('input');
        input.name = key;
        input.value = value;
        form.appendChild(input);
      });
      document.body.appendChild(form);
      form.submit();
    },
    args: [msg.actionUrl, msg.formData]
  });
});

注意：扩展加载到Chrome后，需要在扩展管理页面找到该扩展，开启「允许在无痕模式下运行」权限，否则扩展无法创建无痕窗口。

方案2：无扩展的纯网页替代方案 #

该场景下无法自动完成提交到无痕窗口的操作，只能引导用户手动操作：

• 提示用户先打开Chrome无痕窗口，将表单页面地址复制到无痕窗口中打开后再提交表单
• 若表单支持GET提交，可引导用户右键点击提交按钮，选择「在无痕模式下打开链接」，但该方式不支持POST参数传递

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