Browser Extension Guide

Setup & Installations

Initialize a new Plasmo project with TailwindCSS and a src directory.

pnpm create plasmo --with-tailwindcss --with-src

Then, install the BetterAuth package.

pnpm add better-auth

To start the Plasmo development server, run the following command.

pnpm dev

Configure tsconfig

Configure the tsconfig.json file to include strict mode.

For this demo, we have also changed the import alias from ~ to @ and set it to the src directory.

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

Create the client auth instance

Create a new file at src/auth/auth-client.ts and add the following code.

import { createAuthClient } from "better-auth/react"
 
export const authClient = createAuthClient({
    baseURL: "http://localhost:3000" /* base url of your Better Auth backend. */,
    plugins: [],
});

Configure the manifest

We must ensure the extension knows the URL to the BetterAuth backend.

Head to your package.json file, and add the following code.

{
    //...
    "manifest": {
        "host_permissions": [
            "https://URL_TO_YOUR_BACKEND" // localhost works too (e.g. http://localhost:3000)
        ]
    }
}

You're now ready!

You have now setup BetterAuth for your browser extension.

Add your desired UI and create your dream extension!

To learn more about the client BetterAuth API, check out the client documentation.

Here’s a quick example 😎

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;

Bundle your extension

To get a production build, run the following command.

pnpm build

Head over to chrome://extensions and enable developer mode.

Click on "Load Unpacked" and navigate to your extension's build/chrome-mv3-dev (or build/chrome-mv3-prod) directory.

To see your popup, click on the puzzle piece icon on the Chrome toolbar, and click on your extension.

Learn more about bundling your extension here.

Configure the server auth instance

First, we will need your extension URL.

An extension URL formed like this: chrome-extension://YOUR_EXTENSION_ID.

You can find your extension ID at chrome://extensions.

Head to your server's auth file, and make sure that your extension's URL is added to the trustedOrigins list.

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

That's it!

Everything is set up! You can now start developing your extension. 🎉