Chrome扩展开发中React按钮onClick事件无法触发函数问题

• 检查Chrome扩展的组件加载配置
  先确认React组件是否正确挂载到扩展页面中：

  • 核对manifest.json里的popup、content script等配置路径，确保打包后的React bundle文件被正确引入。
  • 若是popup页面，检查popup.html是否正确加载了组件入口文件，没有路径错误。

• 修正代码中的JSX格式问题
  你提供的代码里JSX用了</>转义字符，这会导致React无法正确解析JSX语法，组件渲染失败后按钮自然无法触发事件。把转义字符替换为正常的</>，同时可以优化逻辑，直接用state获取输入值（无需DOM查询）：

  import React, { useState } from 'react';
  
  const Login = () => {
      const [user, setUser] = useState("");
      
      const getInputValue = () => {
          console.log("用户名：", user);
          console.log("I am here");
      }
  
      return (
          <div id="login-form">
              <p>
                  <div className='form'></div>
                  <input 
                      type="text"
                      id="username"
                      name="username"
                      className='usernameInputField'
                      value={user}
                      onChange={(event) => setUser(event.target.value)}
                      placeholder="Username" 
                      required 
                  />
              </p>
              <p>
                  <button onClick={getInputValue} type="button" id="login">登录</button>
              </p>
          </div>
      );
  };
  export default Login;
  

• 处理Chrome扩展的上下文隔离问题
  如果是在content script中使用React，Manifest V3默认开启的上下文隔离会导致React事件系统失效：

  • 可以在manifest.json中配置world: "MAIN"让content script运行在主页面上下文，同时确保CSP配置允许脚本执行：

    {
        "manifest_version": 3,
        "content_scripts": [
            {
                "matches": ["<all_urls>"],
                "js": ["content.js"],
                "world": "MAIN"
            }
        ],
        "content_security_policy": {
            "extension_pages": "script-src 'self'; object-src 'self'"
        }
    }
    

  • 注意：关闭上下文隔离存在安全风险，仅在必要时使用，优先遵循官方扩展开发规范。

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