浏览器扩展指南
在本指南中，我们将指导您使用 Plasmo 和 Better Auth 进行身份验证来创建浏览器扩展。
如果您想查看完整的示例，可以查看 浏览器扩展示例。
Plasmo 框架不提供浏览器扩展的后端。 本指南假设您已经 设置了 Better Auth 的后端， 并准备好创建浏览器扩展来连接它。
设置与安装
使用 TailwindCSS 和 src 目录初始化一个新的 Plasmo 项目。
pnpm create plasmo --with-tailwindcss --with-src然后，安装 Better Auth 包。
pnpm add better-auth要启动 Plasmo 开发服务器，请运行以下命令。
pnpm dev配置 tsconfig
配置 tsconfig.json 文件以包含 strict 模式。
在本演示中，我们还将导入别名从 ~ 更改为 @，并将其设置为 src 目录。
{
"compilerOptions": {
"paths": {
"@/_": [
"./src/_"
]
},
"strict": true,
"baseUrl": "."
}
}创建客户端身份验证实例
在 src/auth/auth-client.ts 创建一个新文件并添加以下代码。
import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient({
baseURL: "http://localhost:3000" /* 您的 Better Auth 后端的基 URL。 */,
plugins: [],
});配置清单文件
我们必须确保扩展知道 Better Auth 后端的 URL。
转到您的 package.json 文件，并添加以下代码。
{
//...
"manifest": {
"host_permissions": [
"https://URL_TO_YOUR_BACKEND" // localhost 也可以（例如 http://localhost:3000）
]
}
}您现在准备好了！
您现在已经为浏览器扩展设置了 Better Auth。
添加您想要的 UI 并创建您的梦想扩展！
要了解更多关于客户端 Better Auth API 的信息，请查看 客户端文档。
这里是一个快速示例 😎
import { authClient } from "./auth/auth-client"
function IndexPopup() {
const {data, isPending, error} = authClient.useSession();
if(isPending){
return <>加载中...</>
}
if(error){
return <>错误：{error.message}</>
}
if(data){
return <>已登录为 {data.user.name}</>
}
}
export default IndexPopup;打包您的扩展
要获取生产构建，请运行以下命令。
pnpm build转到 chrome://extensions 并启用开发者模式。
点击“加载已解压的扩展程序”并导航到您的扩展的 build/chrome-mv3-dev（或 build/chrome-mv3-prod）目录。
要查看您的弹出窗口，请点击 Chrome 工具栏上的拼图图标，然后点击您的扩展。
了解更多关于 在这里打包您的扩展。
配置服务器身份验证实例
首先，我们需要您的扩展 URL。
扩展 URL 的形式如下：chrome-extension://YOUR_EXTENSION_ID。
您可以在 chrome://extensions 找到您的扩展 ID。
转到您的服务器身份验证文件，并确保将您的扩展 URL 添加到 trustedOrigins 列表中。
import { betterAuth } from "better-auth"
import { auth } from "@/auth/auth"
export const auth = betterAuth({
trustedOrigins: ["chrome-extension://YOUR_EXTENSION_ID"],
})如果您正在开发多个扩展或需要支持具有不同 ID 的不同浏览器扩展，您可以使用通配符模式：
export const auth = betterAuth({
trustedOrigins: [
// 支持特定扩展 ID
"chrome-extension://YOUR_EXTENSION_ID",
// 或使用通配符支持多个扩展（安全性较低）
"chrome-extension://*"
],
})为扩展来源使用通配符（chrome-extension://*）会通过信任所有扩展来降低安全性。
更安全的方法是明确列出您信任的每个扩展 ID。只在开发和测试中使用通配符。
就是这样！
一切都设置好了！您现在可以开始开发您的扩展。🎉
总结
恭喜！您已成功使用 Better Auth 和 Plasmo 创建了一个浏览器扩展。 我们强烈推荐您访问 Plasmo 文档 以了解更多关于该框架的信息。
如果您想查看完整的示例，可以查看 浏览器扩展示例。
如果您有任何问题，请随时在我们的 GitHub 仓库 上打开一个问题，或加入我们的 Discord 服务器 以获取支持。