React开发Chrome扩展时chrome.identity.getAuthToken提示不支持的问题排查

我用React开发Chrome扩展，参照Chrome官方的Google OAuth认证教程实现用户认证，把chrome.identity.getAuthToken的调用放到了App组件的useEffect钩子中：

function App() {
    useEffect(
        () => {
            console.log('chrome', chrome)
            console.log('chrome.identity', chrome.identity)
            console.log('chrome.identity.getAuthToken', chrome.identity.getAuthToken)
            // eslint-disable-next-line no-undef
            chrome.identity.getAuthToken({interactive: true}, function(token) {
                console.log('Token:', token);
            });
        },
        []
    )
    return (
        ... // 与认证无关的内容，可正常渲染
    );
}

控制台显示chrome.identity.getAuthToken已定义，但调用时提示“not supported”。请问这个提示是什么意思？我可能遗漏了哪些配置或步骤？

解决思路与排查步骤 #

“not supported”意味着当前运行环境不允许调用该API，核心是扩展配置或运行上下文出了问题，按以下步骤排查：

• 检查manifest.json的权限与OAuth配置
  必须在配置文件中声明identity权限，并正确配置OAuth2信息，示例：

  {
    "manifest_version": 3,
    "name": "你的扩展名称",
    "version": "1.0",
    "permissions": ["identity"],
    "oauth2": {
      "client_id": "你的Google OAuth客户端ID.apps.googleusercontent.com",
      "scopes": ["https://www.googleapis.com/auth/userinfo.email"]
    },
    "action": {
      "default_popup": "index.html" // React构建后的入口页作为弹出页
    }
  }
  

• 确保代码运行在扩展信任上下文内
  如果用create-react-app直接在localhost运行，此时代码属于普通网页，无法访问Chrome扩展API。你需要把React项目构建后的产物（build文件夹）作为扩展加载，让代码运行在扩展的弹出页、背景页或内容脚本上下文里。

• 验证扩展是否已正确加载
  打开chrome://extensions/，启用开发者模式，确认你的扩展已加载（显示在列表中）。未加载的扩展无法调用任何Chrome扩展API。

• 检查Google OAuth客户端ID的配置
  在Google Cloud控制台创建的客户端ID必须是Chrome应用程序类型，且回调URL要设置为https://<你的扩展ID>.chromiumapp.org/（扩展ID可在chrome://extensions/的扩展详情中查看）。

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