Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion content/docs/browser-extension/extension-integration/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,26 @@ Use the SDK's API in your popup or panel to trigger verification and handle resu
Before starting, ensure you have:

- ✅ Completed the [Installation guide](/browser-extension/installation)
- ✅ Obtained API credentials from the [API Key guide](/api-key)
- ✅ Basic understanding of Chrome extension development
- ✅ Familiarity with JavaScript Promises and async/await
- ✅ A Chrome extension project with Manifest V3

## Get Your API Credentials

<Callout type="warning">
**🔑 Required: Get Your API Credentials First**

Before you proceed with any integration steps, you **must** obtain your API credentials. These credentials (`APP_ID` and `APP_SECRET`) are essential for initializing the SDK and creating verification requests.

**[Get Your API Credentials Now →](/api-key)**

You'll need:
- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key (keep secure!)

Without these credentials, you cannot complete the integration steps below.
</Callout>

## Security Considerations

### Content Security Policy
Expand Down
18 changes: 17 additions & 1 deletion content/docs/browser-extension/extension-integration/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,25 @@ title: Setup
description: Initialize the SDK in your browser extension's background and content scripts
---

## Get Your API Credentials First

<Callout type="warning">
**🔑 Required Before Setup**

Before you can initialize the SDK, you **must** have your API credentials (`APP_ID` and `APP_SECRET`). These are required to create verification requests.

**[Get Your API Credentials →](/api-key)**

You'll need:
- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key

Keep these credentials secure and never expose them in client-side code for production applications.
</Callout>

## Overview

After configuring your manifest, you need to initialize the SDK in two places:
After configuring your manifest and obtaining your API credentials, you need to initialize the SDK in two places:

1. **Background Service Worker**: Manages offscreen documents and verification orchestration
2. **Content Script Loading**: Bridges communication (optional if using static manifest registration)
Expand Down
16 changes: 15 additions & 1 deletion content/docs/browser-extension/extension-integration/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,27 @@ description: Implement Reclaim verification flows in your browser extension popu

With the SDK initialized and configured, you can now implement verification flows in your extension's user interface. This guide covers implementing verification in popups, side panels, and handling the complete verification lifecycle.

## Get Your API Credentials

<Callout type="warning">
**🔑 Required: API Credentials**

Before implementing verification, make sure you have your API credentials (`APP_ID` and `APP_SECRET`). All code examples below require these credentials.

**[Get Your API Credentials →](/api-key)**

You'll need:
- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key
</Callout>

## Prerequisites

Before implementing verification flows, ensure you have:

- ✅ Completed [Manifest Configuration](/browser-extension/extension-integration/manifest-configuration)
- ✅ Completed [Background Setup](/browser-extension/extension-integration/setup)
- ✅ Obtained API credentials from the [API Key guide](/api-key)
- ✅ **Obtained your API credentials** (`APP_ID` and `APP_SECRET`) from the [API Key guide](/api-key)

## Basic Popup Implementation

Expand Down
69 changes: 16 additions & 53 deletions content/docs/browser-extension/index.mdx
Original file line number Diff line number Diff line change
@@ -1,78 +1,41 @@
---
title: Browser Extension SDK
description: Lightweight SDK for integrating Reclaim verification flows into browser extensions and websites with Chrome Manifest V3 support
description: Seamlessly integrate Reclaim Protocol verification into your Chrome browser extension
---

## Overview

Lightweight SDK for integrating Reclaim verification into browser extensions and websites. Handles content-background communication, provider tab management, WebAssembly proof generation, and completion events.
Build browser extensions with Reclaim Protocol verification capabilities. This SDK handles Chrome extension architecture (MV3, service workers, offscreen documents), WebAssembly proof generation, and provider tab management.

### Key Features

- 🔌 **Dual Integration**: Build extensions or integrate from web apps
- 🛡️ **Manifest V3 Compatible**: Full Chrome MV3 support
- ⚡ **WebAssembly Proofs**: High-performance cryptographic proof generation
- 🔄 **Event-Driven**: Real-time updates via clean event API
- 📦 **Pre-built Bundles**: No re-bundling required
- 🎯 **Auto Provider Management**: Automatic tab orchestration
- 🔐 **Network Monitoring**: Built-in request interception

## Two Integration Paths

### 1. Extension Integration (Primary)
### 1. Extension Integration (Standalone)

**Build a browser extension** with Reclaim verification in popup/sidepanel:
- Users trigger verification from your extension UI
**Build a standalone browser extension** with Reclaim verification:

- Complete extension that users install from Chrome Web Store
- Users trigger verification directly from your extension popup/sidepanel
- No website required - extension works independently
- Full control over extension experience
- SDK handles all Chrome extension complexity
- Manifest V3, offscreen documents, service workers

[Get Started with Extension Integration →](/browser-extension/extension-integration)

### 2. Web Integration (Optional)

**Trigger verification from your website** through a compatible extension:
- For websites that want to use an extension built with this SDK
- Users verify without leaving your site
- Extension handles verification, you control website UI
- Requires users to install compatible extension

[Learn About Web Integration →](/browser-extension/web-integration)

## How It Works

Multi-layer architecture for secure verification:

1. **Content Script Bridge** - Communication between pages and extension
2. **Background Service Worker** - Manages offscreen docs and provider tabs
3. **Offscreen Document** - WebAssembly proof generation
4. **Network Interceptor** - Captures network requests during verification
### 2. Web Integration (Website + Extension)

```mermaid
graph LR
A[Web Page / Extension Popup] --> B[Content Script]
B --> C[Background Service Worker]
C --> D[Offscreen Document]
C --> E[Provider Tab]
D --> F[WebAssembly Proof Generation]
E --> G[Network Interceptor]
```
**Trigger verification from your website** using a compatible extension:

## Compatibility
- Requires BOTH: your website + a compatible extension installed by users
- Users verify directly on your website without leaving the page
- Extension (built with this SDK) handles verification in background
- Website maintains control over UI/UX
- Users must install the extension first

**Browsers**: Chrome 93+, Edge 93+, Brave, Opera (Chromium-based)

**Requirements**: Node.js 14.x+, npm 6.x+ or yarn 1.22.x+, Manifest V3

## Next Steps

Choose your integration path:

1. **[Installation](/browser-extension/installation)** - Install the SDK and set up assets
2. **[Extension Integration](/browser-extension/extension-integration)** - Build a browser extension with Reclaim
3. **[Web Integration](/browser-extension/web-integration)** - Integrate from your website
4. **[Troubleshooting](/browser-extension/troubleshooting)** - Common issues and solutions

## Get an API Key

Before integrating, you'll need API credentials. Follow the [Get API Key guide](/api-key) to set up your Reclaim Protocol project.
[Learn About Web Integration →](/browser-extension/web-integration)
21 changes: 19 additions & 2 deletions content/docs/browser-extension/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,28 @@ rm -rf node_modules package-lock.json && npm install
- Ensure SDK assets are in `public/`, not imported in your code
- Reference via manifest configuration (see next steps)

## Get Your API Credentials

<Callout type="warning">
**⚠️ Required Before Proceeding**

Before you can use the SDK, you **must** obtain your API credentials (`APP_ID` and `APP_SECRET`) from the Reclaim Protocol dashboard. These credentials are required for all integrations.

**[Get Your API Credentials Now →](/api-key)**
</Callout>

Without API credentials, you won't be able to initialize the SDK or create verification requests. This is the most important step after installation.

### What You'll Get

- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key (keep this secure!)

You'll need both of these credentials in the next steps for any integration path you choose.

## Next Steps

Choose your integration path:

- **[Extension Integration →](/browser-extension/extension-integration)** - Build a browser extension
- **[Web Integration →](/browser-extension/web-integration)** - Integrate from a website

Get your [API credentials →](/api-key) before proceeding.
18 changes: 17 additions & 1 deletion content/docs/browser-extension/web-integration/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,28 @@ graph LR
5. **Provider Tab**: Handles authentication
6. **Proofs Returned**: Sent back to your website

## Get Your API Credentials First

<Callout type="warning">
**🔑 Required: Get Your API Credentials Before Integration**

Before you can integrate Reclaim verification into your website, you **must** obtain your API credentials. These credentials (`APP_ID` and `APP_SECRET`) are essential for creating verification requests.

**[Get Your API Credentials Now →](/api-key)**

You'll need:
- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key (keep secure!)

Without these credentials, you cannot initialize the SDK or start verification flows.
</Callout>

## Prerequisites

Before integrating, ensure you have:

- ✅ Completed the [Installation guide](/browser-extension/installation)
- ✅ Obtained API credentials from the [API Key guide](/api-key)
- ✅ **Obtained your API credentials (`APP_ID` and `APP_SECRET`)** from the [API Key guide](/api-key)
- ✅ Access to a Reclaim-compatible browser extension (or built one using [Extension Integration](/browser-extension/extension-integration))
- ✅ A web application (React, Vue, vanilla JavaScript, etc.)

Expand Down
18 changes: 17 additions & 1 deletion content/docs/browser-extension/web-integration/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,26 @@ description: Configure the Reclaim Browser Extension SDK in your web application

import { Tab, Tabs } from "fumadocs-ui/components/tabs";

## Get Your API Credentials First

<Callout type="warning">
**🔑 Required: Get Your API Credentials Before Setup**

The first and most important step is obtaining your API credentials. You'll need `APP_ID` and `APP_SECRET` to create verification requests in the steps below.

**[Get Your API Credentials Now →](/api-key)**

What you'll get:
- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key (keep secure!)

These credentials are essential for all the code examples in this guide.
</Callout>

## Prerequisites

- ✅ [Installation guide](/browser-extension/installation) completed
- ✅ [API credentials](/api-key) obtained
- ✅ **[API credentials](/api-key) obtained** (`APP_ID` and `APP_SECRET`)
- ✅ Extension ID of the Reclaim-compatible extension
- ✅ Web application (React, Vue, vanilla JS)

Expand Down
16 changes: 15 additions & 1 deletion content/docs/browser-extension/web-integration/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,26 @@ description: Implement Reclaim verification flows in your web application

This guide demonstrates how to implement complete verification flows in your web application, including initialization, event handling, UI states, and error management.

## Get Your API Credentials

<Callout type="warning">
**🔑 Required: API Credentials**

Before implementing verification, ensure you have your API credentials (`APP_ID` and `APP_SECRET`). All code examples below require these credentials.

**[Get Your API Credentials →](/api-key)**

You'll need:
- **`APP_ID`**: Your unique application identifier
- **`APP_SECRET`**: Your application secret key (keep secure!)
</Callout>

## Prerequisites

- ✅ Completed [Installation](/browser-extension/installation)
- ✅ Completed [Setup](/browser-extension/web-integration/setup)
- ✅ Extension installed and extension ID configured
- ✅ API credentials from [API Key guide](/api-key)
- ✅ **Obtained your API credentials** (`APP_ID` and `APP_SECRET`) from [API Key guide](/api-key)

## Basic Implementation

Expand Down
Loading