Chrome扩展链接功能异常：React开发弹窗内链接无法生效

• 问题原因：Chrome扩展弹窗处于隔离的沙箱环境，直接用<a>标签包裹组件时，要么是Button组件内部阻止了默认点击行为，要么是Chrome的安全策略拦截了未正确配置的跳转请求。

• 方案1：调整<a>标签属性
  给<a>加上target="_blank"和rel="noopener noreferrer"，同时检查Button组件有没有写e.preventDefault()这类阻止默认行为的代码，有的话要删掉：

  <a href="https://google.com" target="_blank" rel="noopener noreferrer">
    <Button>Click here</Button>
  </a>
  

• 方案2：用点击事件手动触发跳转
  绕开<a>标签，直接在Button的点击事件里调用window.open，这种方式更不容易出问题：

  <Button onClick={() => window.open("https://google.com", "_blank", "noopener,noreferrer")}>
    Click here
  </Button>
  

• 方案3：用Chrome扩展API打开链接
  先在manifest.json里加上tabs权限：

  {
    "permissions": ["tabs"]
  }
  

  然后用Chrome的tabs.createAPI来打开链接：

  <Button onClick={() => chrome.tabs.create({ url: "https://google.com" })}>
    Click here
  </Button>
  

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