Browser Extension Guide

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

```bash
pnpm create plasmo --with-tailwindcss --with-src
```

Then, install the Better Auth package.

```bash
pnpm add better-auth
```

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

```bash
pnpm dev
```

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.

```json title="tsconfig.json"
{
    "compilerOptions": {
        "paths": {
            "@/_": [
                "./src/_"
            ]
        },
        "strict": true,
        "baseUrl": "."
    }
}
```

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

<Files>
  <Folder name="src" defaultOpen>
    <Folder name="auth" defaultOpen>
      <File name="auth-client.ts" />
    </Folder>
  </Folder>
</Files>

```ts title="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: [],
});
```

We must ensure the extension knows the URL to the Better Auth backend.

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

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

You have now set up Better Auth for your browser extension.

Add your desired UI and create your dream extension!

To learn more about the client Better Auth API, check out the <Link href="/docs/concepts/client">client documentation</Link>.

Here's a quick example 😎

```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;
```

To get a production build, run the following command.

```bash
pnpm build
```

Head over to <Link href="chrome://extensions" target="_blank">chrome://extensions</Link> 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 <Link href="https://docs.plasmo.com/framework#loading-the-extension-in-chrome">bundling your extension here.</Link>

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 <Link href="chrome://extensions" target="_blank">chrome://extensions</Link>.



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

```ts title="server.ts"
import { betterAuth } from "better-auth"
import { auth } from "@/auth/auth"

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

If you're developing multiple extensions or need to support different browser extensions with different IDs, you can use wildcard patterns:

```ts title="server.ts"
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://*"
    ],
})
```

<Callout type="warn">
  Using wildcards for extension origins (`chrome-extension://*`) reduces security by trusting all extensions.
  It's safer to explicitly list each extension ID you trust. Only use wildcards for development and testing.
</Callout>

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