浏览器扩展指南

在本指南中，我们将带您了解如何使用 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 <>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 列表中。

server.ts

import { betterAuth } from "better-auth"
import { auth } from "@/auth/auth"

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

如果您正在开发多个扩展或需要支持不同浏览器扩展的不同 ID，可以使用通配符模式：

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 服务器获取支持。

On this page