SuperAPI AI 工具集

clerk-chrome-extension-patterns

通用与其它

查看项目

更新于 10-16 06:48

技能介绍

用途:指导在 Chrome 扩展中使用 @clerk/chrome-extension 实现认证,涵盖 popup、side panel、service worker、content script 和无界面扩展等形态。

主要能力与规则:OAuth(Google、GitHub 等)与 SAML 不支持在 popup 或 side panel 中直接使用,需通过 syncHost 委托给 Web 应用;邮件魔法链接在 popup 中不可用;side panel 不会自动刷新认证状态,需关闭重开;service worker 与 content script 无法访问 Clerk React hooks,需用 createClerkClient() 或消息传递;扩展 URL 使用 chrome-extension://,重定向需用 chrome.runtime.getURL('.');需配置稳定 CRX ID,否则每次重建都会破坏认证;content script 因来源限制不能直接用 Clerk;扩展环境需在 Clerk Dashboard 关闭机器人保护。

使用方式:可用 Plasmo 快速开始:npx create-plasmo --with-tailwindcss --with-src my-extension,然后 npm install @clerk/chrome-extension,并在 Clerk Dashboard 的 Native applications 中启用 Native API。popup 中用 ClerkProvider 包裹,SignInButton 使用 mode="modal"。需要 OAuth/SAML 时配置 syncHost 与 host_permissions,并通过 Clerk API 将扩展 ID 加入 allowed_origins。service worker 从 @clerk/chrome-extension/client 导入 createClerkClient,使用 background: true 保持会话。content script 通过 chrome.runtime.sendMessage 向后台请求 token。

适用场景:需要 popup 或 side panel 登录、与 Web 应用同步登录态、后台静默认证的扩展。

限制:syncHost 需 Pro(自定义域名),OAuth 需 Pro 且 Web 应用已配置,SAML 需 Enterprise;机器人保护必须禁用;localStorage 不应用于认证,应使用 chrome.storage.local 或 tokenCache。部分细节资料未提供。