# 浏览器扩展指南 (/docs/guides/browser-extension-guide)
使用 Better Auth 创建浏览器扩展的分步指南
在本指南中，我们将带您了解如何使用 Plasmo 结合 Better Auth 进行身份验证来创建浏览器扩展。
如果您想查看完整示例，可以参考 浏览器扩展示例。
Plasmo 框架不提供浏览器扩展的后端支持。
本指南假设您已经{" "}
设置好了 Better Auth 后端，
并准备创建一个浏览器扩展来连接它。
## 设置与安装 [#设置与安装]
使用 TailwindCSS 和 src 目录初始化一个新的 Plasmo 项目。
```bash
pnpm create plasmo --with-tailwindcss --with-src
```
然后，安装 Better Auth 包。
```bash
pnpm add better-auth
```
要启动 Plasmo 开发服务器，请运行以下命令。
```bash
pnpm dev
```
## 配置 tsconfig [#配置-tsconfig]
将 `tsconfig.json` 文件配置为包含 `strict` 模式。
对于此演示，我们还将导入别名从 `~` 改为 `@`，并将其设置为 `src` 目录。
```json title="tsconfig.json"
{
"compilerOptions": {
"paths": {
"@/_": [
"./src/_"
]
},
"strict": true,
"baseUrl": "."
}
}
```
## 创建客户端认证实例 [#创建客户端认证实例]
在 `src/auth/auth-client.ts` 创建一个新文件，并添加以下代码。
```ts title="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 文件，并添加以下代码。
```json title="package.json"
{
//...
"manifest": {
"host_permissions": [
"https://URL_TO_YOUR_BACKEND" // localhost 也可以（例如 http://localhost:3000）
]
}
}
```
## 现在准备就绪！ [#现在准备就绪]
您已经为浏览器扩展设置了 Better Auth。
添加您想要的 UI 并创建您梦想中的扩展！
要了解更多关于客户端 Better Auth API，请查看 客户端文档。
这里有一个快速示例 😎
```tsx title="src/popup.tsx"
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;
```
## 打包您的扩展 [#打包您的扩展]
要获取生产构建，请运行以下命令。
```bash
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` 列表中。
```ts title="server.ts"
import { betterAuth } from "better-auth"
import { auth } from "@/auth/auth"
export const auth = betterAuth({
trustedOrigins: ["chrome-extension://YOUR_EXTENSION_ID"],
})
```
如果您正在开发多个扩展或需要支持不同浏览器扩展的不同 ID，可以使用通配符模式：
```ts title="server.ts"
export const auth = betterAuth({
trustedOrigins: [
// 支持特定扩展 ID
"chrome-extension://YOUR_EXTENSION_ID",
// 或使用通配符支持多个扩展（安全性较低）
"chrome-extension://*"
],
})
```
使用通配符作为扩展来源（`chrome-extension://*`）会降低安全性，因为它会信任所有扩展。
建议明确列出您信任的每个扩展 ID。仅在开发或测试中使用通配符。
## 完成！ [#完成]
一切就绪！现在您可以开始开发您的扩展了。🎉
## 总结 [#总结]
恭喜！您已成功使用 Better Auth 和 Plasmo 创建了一个浏览器扩展。
强烈建议您访问 Plasmo 文档，了解更多该框架的信息。
如果您想查看完整示例，可以参考 浏览器扩展示例。
如果您有任何问题，欢迎在我们的 GitHub 仓库 提交 issue，或加入我们的 Discord 服务器 获取支持。