如何在React.js中打开新链接至无痕模式（Incognito mode）？

首先要明确：chrome.windows.create({"url": url, "incognito": true}); 是Chrome浏览器扩展专属API，普通网页无法直接调用，下面分两种场景说明实现方式：

场景1：开发Chrome浏览器扩展（用React作为扩展前端） #

如果你的React项目是Chrome扩展的一部分，按以下步骤操作：

1. 配置扩展权限
   在扩展的manifest.json中声明tabs权限，Manifest V3示例：

   {
     "manifest_version": 3,
     "permissions": ["tabs"],
     // 其他扩展配置（如name、version等）
   }
   

2. 在React组件中调用API
   写一个触发函数，调用Chrome扩展API创建无痕窗口，同时处理API不可用或权限错误的情况：

   import React from 'react';
   
   const OpenIncognitoBtn = () => {
     const openInIncognito = () => {
       const targetUrl = "https://your-target-url.com";
       // 检查Chrome扩展API是否可用
       if (chrome?.windows) {
         chrome.windows.create(
           { url: targetUrl, incognito: true },
           (createdWindow) => {
             // 处理创建失败的情况
             if (chrome.runtime.lastError) {
               console.error('创建无痕窗口失败：', chrome.runtime.lastError.message);
             }
           }
         );
       } else {
         console.error('Chrome扩展API不可用');
       }
     };
   
     return (
       <button onClick={openInIncognito}>
         在无痕模式打开链接
       </button>
     );
   };
   
   export default OpenIncognitoBtn;
   

   注意：该代码需在扩展的弹出页面、背景脚本或有权限的内容脚本中运行，普通网页环境无法调用。

场景2：开发普通React网页（非Chrome扩展） #

普通网页受浏览器安全限制，无法通过代码强制打开无痕窗口——这是浏览器保护用户隐私的机制。此时只能引导用户手动操作：

import React from 'react';

const LinkWithIncognitoHint = () => {
  const targetUrl = "https://your-target-url.com";

  return (
    <div>
      <a 
        href={targetUrl} 
        target="_blank" 
        rel="noopener noreferrer"
      >
        打开链接
      </a>
      <p style={{ fontSize: '12px', color: '#666' }}>
        * 如需在无痕模式打开，请右键点击链接 → 选择「在无痕窗口中打开」
      </p>
    </div>
  );
};

export default LinkWithIncognitoHint;

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