浏览器扩展开发指南
在本指南中，我们将引导您使用 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: [],
});配置清单 (manifest)
我们必须确保扩展程序知道 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 并启用开发者模式。
点击 "Load Unpacked" (加载已解压的扩展程序) 并导航到您的扩展的 build/chrome-mv3-dev (或 build/chrome-mv3-prod) 目录。
要查看您的弹出窗口，请点击 Chrome 工具栏上的拼图图标，然后点击您的扩展程序。
了解更多关于 在此处打包您的扩展程序。
配置服务器认证实例
首先，我们需要您的扩展程序 URL。
扩展程序 URL 格式如下：chrome-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 服务器 寻求支持。