使用 ReactJS 的 Chrome 扩展身份验证答案

【问题标题】：Chrome Extension Authentication with ReactJS使用 ReactJS 的 Chrome 扩展身份验证
【发布时间】：2023-01-07 03:12:11
【问题描述】：

我正在尝试使用 ReactJS 构建一个也具有身份验证的 chrome 扩展。我在https://developer.chrome.com/docs/extensions/mv3/tut_oauth/ 关注了 google oauth 流程，我不断地在令牌上得到 undefined 。 Welcome.tsx:14 Uncaught TypeError: Cannot read properties of undefined (reading 'getAuthToken')

const Welcome = () => {

  const handleAuth = () => {
    console.log('chrome', chrome)
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  }

  return( 
  <div>
    <Typography>
        Hello World
    </Typography>
    <Button variant="contained" onClick={handleAuth}>Log In Google</Button>

  </div>
  )
}

export default Welcome;

这是因为我需要将其用作某种后台脚本来处理它吗？请注意，我的清单有 key "permissions": ["identity"], 和正确配置的 oauth2。任何指导表示赞赏

【问题讨论】：

标签： reactjs google-chrome google-chrome-extension chrome-extension-manifest-v3

【解决方案1】：

chrome.identity 对象在您尝试使用它的上下文中不可用。这可能是因为代码在内容脚本或注入脚本中运行，而不是在后台脚本或作为扩展包一部分的脚本中运行。

使固定：您可以尝试将使用 chrome.identity 的代码移动到后台脚本或作为扩展程序包一部分的脚本。或者，您可以使用 chrome.runtime.sendMessage 或 chrome.tabs.sendMessage API 从内容脚本或注入脚本向后台脚本发送消息，并让后台脚本使用 chrome.identity 获取 OAuth 令牌。

【讨论】：