@ clerk/ chrome-扩展

开始

办事员 是将认证和用户管理添加到浏览器扩展的简单方法。 在您的应用程序中添加签名、 签名和配置管理 .

先决条件

• 节点.js >=20.9.0 或稍后时间
• 现有办事员应用程序. 免费创建您的账户。 。 。 .
• 已有的 React app (使用) 维特 (例如)

特性支持

请参看最近的扩展名 认证支持矩阵 在办事员文档中提供更多信息.

使用量

1. 安装 : npm install @clerk/chrome-extension

2. 设置一个一致的扩展密钥:浏览器扩展可被其独特的密钥识别出,其方式类似于网站如何被其域名识别出. 您需要明确配置您的扩展名的密钥, 否则会经常更改 。 如果密钥改变,则可能导致扩展失败. 见 配置一致的密钥 更多信息指南.

3. 更新办事员设置: 一旦设置了一致的扩展密钥,您就需要配置您的办事员设置,允许扩展与您的办事员API通信. 您可以在您的办事员设置中将扩展键添加到允许的出处列表中。 设置 allowed_origins 实值 所需经费 两者 发展 财务报告和审定财务报表 生产 实例.

   curl  -X PATCH https://api.clerk.com/v1/instance \
         -H "Content-type: application/json" \
         -H "Authorization: Bearer <CLERK_SECRET_KEY>" \
         -d '{"allowed_origins": ["chrome-extension://<YOUR_EXTENSION_KEY>"]}'
   

4. 设置环境变量 : 获取 可公布的密钥 从你的 办事员仪表板 并将其设定为环境变量.

   # Vite
   VITE_CLERK_PUBLISHABLE_KEY=pk_test_xxx
   

   # Plasmo
   PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
   

5. 更新扩展名列表 : 您需要更新您的扩展列表 允许支持办事员.

   1. 基础配置数字 : 如果您只计划在扩展语境中使用 Clerk , 请使用此选项 .
   2. 会话同步配置数字 : 如果您计划在同一浏览器中共享一个网站的认证, 请使用此选项 .

6. 在您的应用程序中添加办事员 : 虽然不需要,但我们一般建议使用Plasmo来开发浏览器扩展. 这将在您的扩展中执行共同的标准, 并在未来更容易与其他浏览器进行整合 .

   1. 通过 ClerkProvider数字 : 这是对所有扩展的一般办法。 从这里你就可以支持只扩展认证,以及在同一浏览器中与一个网站共享认证.
   2. 服务人员数字 : 如果您还需要使用背景服务人员,您可以从扩展语境访问办事员客户端.

示例存储器

• 快速启动: 扩展正在使用自己的认证
• 服务工人和 react-router: 扩展认证与同一浏览器中的网站共享, 需要从服务工作者的办事员处获取用户信息或需要使用 react-router

支助

帮帮忙,来看我们 支持页面。 。 。 .

社区

加入我们 Discord 社区 连接到其他开发者.

捐款

我们欢迎所有社区的贡献! 如果你想以任何方式作出贡献,请阅读 我们的捐款准则 财务报告和审定财务报表 行为守则。 。 。 .

警卫

@clerk/chrome-extension 遵循安全方面的良好做法,但不能保证100%的安全.

@clerk/chrome-extension 提供 "就这样" 没有 保证. 冒险使用.

欲了解更多信息并报告安全问题,请参见我们 安全记录。 。 。 .

许可证

本项目根据以下规定获得许可证: 麻省理工学院许可证。 。 。 .

见 自由主义 更多信息.