浏览器扩展指南

在本文中，我们将引导你使用 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 目录。

tsconfig.json

{
    "compilerOptions": {
        "paths": {
            "@/_": [
                "./src/_"
            ]
        },
        "strict": true,
        "baseUrl": "."
    }
}

创建客户端认证实例

在 src/auth/auth-client.ts 创建一个新文件并添加以下代码。

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 文件，并添加以下代码。

package.json

{
    //...
    "manifest": {
        "host_permissions": [
            "https://URL_TO_YOUR_BACKEND" // localhost 也可以（例如 http://localhost:3000）
        ]
    }
}

现在你准备好了！

你现在已经为你的浏览器扩展设置了 Better Auth。

添加你想要的 UI 并创建你梦想的扩展！

要了解更多关于客户端 Better Auth API 的信息，请查看客户端文档。

这里有一个快速示例 😎

src/popup.tsx

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 列表中。

server.ts

import { betterAuth } from "better-auth"
import { auth } from "@/auth/auth"
 
export const auth = betterAuth({
    trustedOrigins: ["chrome-extension://YOUR_EXTENSION_ID"],
})