CustomGPT Chrome Extension (White-Label Solution)

Pure JavaScript Chrome extension with Vercel serverless proxy for CustomGPT.ai API integration. Designed for your API customers to create their own branded Chrome extensions with zero user setup.

Get you CustomGPT.ai RAG API key here, needed to use this integration.

Overview

This is a white-label solution enabling your CustomGPT.ai API customers to:

Deploy a Vercel proxy server with their CustomGPT API credentials
Configure the extension with their proxy URL
Publish to Chrome Web Store under their brand
End users install and use immediately (zero setup required!)

Quick Start (5 Minutes)

Step 1: Deploy Vercel Proxy

cd vercel-proxy

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Edit .env with your CustomGPT credentials
# CUSTOMGPT_API_KEY=your_key_here
# CUSTOMGPT_PROJECT_ID=your_project_id

# Deploy to Vercel
npm run deploy
# Or: vercel dev 

# Note the deployment URL: https://your-proxy.vercel.app

Step 2: Configure Extension

cd extension/js

# Edit config.js
# Change line 19:
VERCEL_PROXY_URL: 'https://your-proxy.vercel.app'

Step 3: Load Extension

Open Chrome → chrome://extensions/
Enable "Developer mode" (top right)
Click "Load unpacked"
Select chrome-extension/extension/ folder
Extension icon appears in toolbar!

Step 4: Test

Click extension icon
See suggested starter questions
Click a question OR type your own message
Watch AI respond with typing indicator
See timestamps, copy messages, react with thumbs up/down
View sources/citations when available

Screenshots

Chat Interface

Welcome Screen: Clean welcome with agent avatar and suggested questions
Active Chat: Modern message bubbles with timestamps and actions
Citations: Collapsible sources section with rich previews
Send Button: Prominent "Send" button with animated paper plane icon

UI Features Showcase

Purple gradient theme with smooth animations
WCAG AA accessible color contrast
Smooth scroll and fade-in animations
Professional, emoji-free design

Technical Architecture

Frontend: Vanilla JavaScript (ES6+), Chrome Manifest V3, CSS3 with theming Backend: Vercel serverless functions, Node.js API: CustomGPT integration via proxy (chat, health, settings, feedback, citations) Security: Environment variables for secrets, CORS configured, no frontend API keys

Configuration Guide

Admin Configuration (Before Publishing)

1. Extension Configuration

Edit extension/js/config.js:

const CONFIG = {
  // REQUIRED: Your Vercel proxy URL
  VERCEL_PROXY_URL: 'https://your-proxy.vercel.app',

  // OPTIONAL: Branding
  EXTENSION_NAME: 'CustomGPT Assistant',
  EXTENSION_TAGLINE: 'Your AI-powered assistant',

  // OPTIONAL: Feature flags
  FEATURES: {
    AUTO_SCROLL: true
  }
};

Note: The agent name, avatar, and suggested questions are automatically fetched from your CustomGPT agent settings via the /api/settings endpoint. No hardcoded agent information in the extension.

2. Host Permissions Configuration

CRITICAL: Update extension/manifest.json to match your proxy domain.

Current default:

"host_permissions": [
  "https://*.vercel.app/*"
]

⚠️ This MUST be updated if:

Using a custom domain (not Vercel)
Using a specific subdomain for security
Hosting on Railway, Render, or other platforms

Examples for different hosting:

Vercel with custom domain:

"host_permissions": [
  "https://api.yourdomain.com/*"
]

Railway:

"host_permissions": [
  "https://your-app.railway.app/*"
]

Render:

"host_permissions": [
  "https://your-app.onrender.com/*"
]

Multiple domains (development + production):

"host_permissions": [
  "https://your-proxy-dev.vercel.app/*",
  "https://api.yourdomain.com/*"
]

🔒 Security Best Practice:

✅ Use specific domain: https://your-specific-app.vercel.app/*
❌ Avoid wildcards: https://*.vercel.app/* (too broad, allows any Vercel app)

Why this matters:

Chrome requires explicit permission for the extension to communicate with your proxy
Wrong domain = Extension can't fetch responses from your API
Users will see "Failed to fetch" errors if misconfigured

3. Manifest Customization Checklist

Edit extension/manifest.json before publishing:

Required Updates:

Update host_permissions to match your proxy URL (see above)
Change name (line 3): Your extension name
Change description (line 4): Your extension description
Update version (line 5): Your version number (e.g., "1.0.0")

Optional Updates:

Update icons paths if using custom icon filenames
Change action.default_title (tooltip on extension icon)
Modify permissions if adding features (be minimal!)

Example manifest.json key fields:

{
  "name": "My Company AI Assistant",
  "description": "Get instant answers from our knowledge base",
  "version": "1.0.0",
  "host_permissions": [
    "https://api.mycompany.com/*"
  ]
}

⚠️ Content Security Policy (CSP):

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'"
}

Purpose: Security policy that only allows scripts from the extension itself
Don't modify unless you know what you're doing
Why exists: Chrome Manifest V3 security requirement
What it prevents: Inline scripts, external scripts, eval()

4. Branding Customization

Extension Name & Description:

Edit extension/manifest.json (lines 3-5)

Icons:

Add icon16.png, icon48.png, icon128.png to extension/icons/
Use your brand colors

Styling:

Edit extension/css/popup.css (CSS variables at top)

:root {
  --primary-color: #8b5cf6;      /* Change to your brand color */
  --primary-hover: #7c3aed;
  /* ... */
}

🔧 Vercel Deployment Details

Environment Variables

Set in Vercel dashboard or via CLI:

# Required
CUSTOMGPT_API_KEY=your_api_key_here
CUSTOMGPT_PROJECT_ID=your_project_id_here

API Endpoints

Your deployed proxy provides:

POST /api/chat - Send message, get AI response
GET /api/health - Health check
GET /api/settings - Get agent settings

Test health endpoint:

curl https://your-proxy.vercel.app/api/health

Expected response:

{
  "status": "ok",
  "configured": true,
  "config": {
    "hasCustomGPTKey": true,
    "hasProjectId": true
  }
}

Publishing to Chrome Web Store

Prerequisites

Google Developer account ($5 one-time fee)
Register at: https://chrome.google.com/webstore/devconsole/

Preparation Checklist

Configure config.js with production Vercel URL

Package Extension

cd extension/

# Create ZIP file
zip -r customgpt-extension.zip . -x "*.DS_Store" "*.git*"

Upload to Chrome Web Store

Go to Chrome Web Store Developer Dashboard
Click "New Item"
Upload customgpt-extension.zip
Fill out listing:
- Name: Your Extension Name
- Summary: Short description (132 chars)
- Description: Full description with features
- Category: Productivity
- Language: English (or your language)
- Screenshots: At least 1 (1280x800px)
- Privacy Policy: URL to your privacy policy (required!)
- Permissions Justification: Explain why you need storage/activeTab
Click "Submit for Review"
Review time: 1-3 days typically

CORS Configuration

Current vercel.json allows all origins (*). For production, consider restricting:

{
  "headers": [{
    "key": "Access-Control-Allow-Origin",
    "value": "chrome-extension://YOUR_EXTENSION_ID"
  }]
}

Get extension ID after publishing to Chrome Web Store.

Troubleshooting

"Failed to fetch" Errors

Cause: host_permissions in manifest.json doesn't match your proxy URL
Fix: Update host_permissions to match your deployed Vercel proxy domain (see Host Permissions Configuration)

CORS Errors

Cause: Incorrect proxy URL in config.js
Fix: Verify VERCEL_PROXY_URL matches your deployed Vercel URL exactly

Extension Not Loading

Cause: Invalid manifest.json syntax
Fix: Validate JSON syntax, ensure all required fields are present

Agent Name Not Showing

Cause: /api/settings endpoint not accessible
Fix: Test endpoint with curl https://your-proxy.vercel.app/api/settings, verify API credentials in Vercel environment variables

Manifest Validation Errors

Cause: Incorrect CSP or permissions format
Fix: Don't modify content_security_policy unless necessary, keep permissions minimal