浏览器扩展指南
在本指南中，我们将带你了解如何使用 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" /* Base URL of your Better Auth backend. */,
plugins: [],
});配置清单
我们必须确保扩展程序知道 Better Auth 后端的 URL。
打开你的 package.json 文件，然后添加以下代码。
{
//...
"manifest": {
"host_permissions": [
"https://URL_TO_YOUR_BACKEND" // localhost works too (e.g. http://localhost:3000)
]
}
}你现在准备好了！
你现在已经为你的浏览器扩展设置了 Better Auth。
添加你想要的界面并创建你梦想中的扩展！
要了解有关客户端 Better Auth API 的更多信息，请查看 客户端文档。
这是一个快速示例 😎
import { authClient } from "./auth/auth-client"
function IndexPopup() {
const {data, isPending, error} = authClient.useSession();
if(isPending){
return <>Loading...</>
}
if(error){
return <>Error: {error.message}</>
}
if(data){
return <>Signed in as {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: [
// Support a specific extension ID
"chrome-extension://YOUR_EXTENSION_ID",
// Or support multiple extensions with wildcard (less secure)
"chrome-extension://*"
],
})使用通配符来指定扩展来源（chrome-extension://*）会降低安全性，因为它信任了所有扩展。
更安全的做法是明确列出你信任的每个扩展 ID。通配符只应在开发和测试时使用。
就这样！
一切已设置完毕！你现在可以开始开发你的扩展了。🎉
总结
【Wrapping Up】
恭喜！你已成功使用 Better Auth 和 Plasmo 创建了浏览器扩展。我们强烈建议你访问 Plasmo 文档，以了解有关该框架的更多信息。
如果你想查看一个完整的示例，可以查看 浏览器扩展示例。
如果你有任何问题，请随时在我们的 GitHub 仓库上提交问题，或加入我们的 Discord 服务器寻求支持。