This guide walks you through launching a Browserbase session with the 1Password Chrome extension, authenticating your vault, and confirming autofill on login forms. This is ideal for flows that require login or authentication where you want to avoid hardcoding credentials into your code.
This guide assumes you have a 1Password account and a Browserbase account and a project created. If you don’t, you can create your 1password account here and create a Browserbase account here.
1. Install Dependencies
npm install playwright-core @browserbasehq/sdk dotenv @browserbasehq/stagehand
npm install playwright-core @browserbasehq/sdk dotenv @browserbasehq/stagehand
Create a .env file:
BROWSERBASE_API_KEY=your_browserbase_api_key
BROWSERBASE_PROJECT_ID=your_browserbase_project_id
EXTENSION_ZIP_PATH=./1password.zip
OPENAI_API_KEY=your_openai_api_key
PASS_USERNAME=your_1password_email
PASS_SECRETKEY=your_1password_secret_key
PASS_PASSWORD=your_1password_master_password
2. Zip the Extension
Assuming that you have the 1Password extension installed, you’ll need to locate and zip the extension files from your local Chrome install.
Find where Chrome stores extensions
Mac: ~/Library/Application Support/Google/Chrome/Default/Extensions
Windows: C:\Users<YourUsername>\AppData\Local\Google\Chrome\User Data\Default\Extensions
Identify & Zip the 1Password extension folder
Find the versioned subfolder inside the 1Password extension directory. The extension ID should be aeblfdkhhhdcdjpifhhbdiojplfjncoa.
Navigate to the versioned folder (e.g., 2.15.1_0) and zip it:
cd ~/Library/Application\ Support/Google/Chrome/Default/Extensions/aeblfdkhhhdcdjpifhhbdiojplfjncoa/2.15.1_0
zip -r 1password.zip .
Move 1password.zip to an accessible location
Update your .env
EXTENSION_ZIP_PATH=./1password.zip
3. Upload Extension to Browserbase
Use the Browserbase SDK to upload the zipped extension:
import Browserbase from "@browserbasehq/sdk";
import { createReadStream } from "fs";
export async function createExtension(bb: Browserbase): Promise<string> {
const extensionPath = process.env.EXTENSION_ZIP_PATH!;
const extension = await bb.extensions.create({
file: createReadStream(extensionPath),
});
console.log(`Extension uploaded with ID: ${extension.id}`);
console.log(`Load this extension into your .env file as EXTENSION_ID`);
return extension.id;
}
Copy the returned extensionId and update your .env file:
EXTENSION_ID=your_uploaded_extension_id
Update your Stagehand setup to load the extension and use Browserbase:
import { ConstructorParams, Stagehand } from "@browserbasehq/stagehand";
import dotenv from "dotenv";
dotenv.config();
const stagehandConfig = (): ConstructorParams => ({
env: "BROWSERBASE",
modelName: "CHOOSE_MODEL",
modelClientOptions: { apiKey: process.env.MODEL_API_KEY! },
browserbaseSessionCreateParams: {
projectId: process.env.BROWSERBASE_PROJECT_ID!,
browserSettings: {
extensionId: process.env.EXTENSION_ID!,
},
},
});
const stagehand = new Stagehand(stagehandConfig());
await stagehand.init();
const page = stagehand.page;
5. Authenticate 1Password
Navigate to the 1Password extension page:
chrome-extension://aeblfdkhhhdcdjpifhhbdiojplfjncoa/app/app.html#/page/welcome
This can be done by automating the login by storing the credentials in the .env file and using the Stagehand SDK to automate the login or by manually logging in to the 1Password extension using the live session view.
Here’s an example of how to automate the login:
await page.goto("chrome-extension://aeblfdkhhhdcdjpifhhbdiojplfjncoa/app/app.html#/page/welcome");
await page.act("click the Continue button");
await page.act("click the Sign in button");
await page.act(`type '${PASS_USERNAME}' into the email input`);
await page.act("click the Continue button");
await page.act(`type '${PASS_SECRETKEY}' into the Secret Key input`);
await page.act(`type '${PASS_PASSWORD}' into the Password input`);
await page.act("click the Sign In button");
await page.waitForLoadState("networkidle");
To avoid hardcoding the credentials, you can also manually login to the 1Password extension using the live session view.
6. Confirm Autofill!
Navigate to a login page where credentials are stored in your vault:
await page.goto("https://browserbase.com/sign-in");
await page.waitForLoadState("networkidle");
Watch for autofill behavior and that’s it! You’ve authenticated your 1Password vault inside Browserbase and confirmed login autofill.
Next Steps
