Chrome Extension Setup Guide

This guide walks you through the complete process of publishing your Chrome extension and setting up Google OAuth credentials.

Overview

To use Google OAuth with your Chrome extension, you need:

1. A published Chrome extension (or at least uploaded to the Chrome Web Store)
2. The extension ID from the Chrome Web Store
3. Google OAuth credentials configured with that extension ID

Why do I need to publish first?

Google OAuth for Chrome extensions requires a stable extension ID. When you load an extension locally ("Load unpacked"), Chrome generates a temporary ID that changes. The Chrome Web Store assigns a permanent ID that you'll use for OAuth configuration.

Part 1: Prepare Your Extension

Step 1: Create Required Assets

Before uploading to the Chrome Web Store, prepare these assets:

Asset	Requirements
Icon	128x128 PNG (required)
Promotional Images	440x280 small tile, 920x680 large tile (optional but recommended)
Screenshots	1280x800 or 640x400, PNG or JPEG (at least 1 required)
Description	Detailed description of your extension

Step 2: Update manifest.json

Ensure your manifest.json is complete:

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0.0",
  "description": "A brief description of what your extension does",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "identity",
    "storage"
  ],
  "host_permissions": [
    "https://api.extensionlogin.com/*"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png"
    }
  }
}

Important

Don't add the oauth2 section to your manifest yet. You'll add it after getting your OAuth credentials.

Step 3: Create the Extension Package

1. Make sure all your files are in a single folder
2. Create a ZIP file of the folder contents (not the folder itself)

On Windows:

• Select all files in your extension folder
• Right-click → Send to → Compressed (zipped) folder

On Mac/Linux:

cd your-extension-folder
zip -r ../extension.zip .

Part 2: Submit to Chrome Web Store

Step 1: Register as a Chrome Web Store Developer

1. Go to the Chrome Web Store Developer Dashboard
2. Sign in with your Google account
3. Pay the one-time $5 registration fee (if you haven't already)
4. Accept the developer agreement

Step 2: Create a New Item

1. Click "New Item" in the developer dashboard
2. Upload your ZIP file
3. Wait for it to process

Step 3: Fill in Store Listing

Complete the following sections:

Product Details

• Language: Select your primary language
• Extension name: Your extension's display name
• Summary: Brief description (up to 132 characters)
• Description: Detailed description of features and functionality

Graphic Assets

• Upload your icon (128x128)
• Upload at least one screenshot (1280x800)
• Optionally add promotional images

Additional Fields

• Category: Choose the most appropriate category
• Language: Languages your extension supports
• Official URL: Your website (optional)
• Homepage URL: Link to extension documentation

Step 4: Set Privacy Practices

1. Click on the "Privacy" tab
2. Describe what data your extension collects:
   • Check "User's email address" if using ExtensionLogin
   • Check "Personally identifiable information" if collecting names
3. Provide your privacy policy URL
4. Certify your data usage practices

Privacy Policy

If you don't have a privacy policy, you can use a generator service or create a simple one that explains:

• What data you collect (email, name)
• How you use it (authentication, CRM integration)
• How users can request data deletion

Step 5: Set Distribution

1. Click on the "Distribution" tab
2. Choose visibility:
   • Public: Anyone can find and install
   • Unlisted: Only users with the direct link can install
3. Select regions where your extension will be available

Step 6: Submit for Review

1. Review all sections for completeness
2. Click "Submit for Review"
3. Your extension enters the review queue

Review Timeline

• Initial review: Usually 1-3 business days
• Updates: Often faster (within 24 hours)
• Complex extensions or policy concerns may take longer

Part 3: Get Your Extension ID

Before Approval (Recommended)

You can get your extension ID immediately after uploading, without waiting for approval:

1. In the Developer Dashboard, find your extension
2. Click on your extension to open its details
3. Look at the URL in your browser's address bar:

   https://chrome.google.com/webstore/devconsole/.../items/abcdefghijklmnopqrstuvwxyzabcdef

4. The 32-character string at the end is your Extension ID

Alternatively:

1. Click on the "Package" tab in your item's dashboard
2. Your extension ID is displayed there

After Approval

Once approved, your extension will have a public store URL:

https://chrome.google.com/webstore/detail/your-extension-name/abcdefghijklmnopqrstuvwxyzabcdef

The 32-character string after the last / is your Extension ID.

Part 4: Create Google OAuth Credentials

Now that you have your extension ID, create OAuth credentials.

Step 1: Set Up Google Cloud Project

1. Go to Google Cloud Console
2. Click the project dropdown at the top
3. Click "New Project"
4. Enter a project name (e.g., "My Extensions Auth")
5. Click "Create"

Step 2: Configure OAuth Consent Screen

1. In the left sidebar, go to APIs & Services → OAuth consent screen
2. Select "External" user type (unless you have Google Workspace)
3. Click "Create"

Fill in the required fields:

Field	Value
App name	Your extension or company name
User support email	Your email address
Developer contact email	Your email address

4. Click "Save and Continue"

Add Scopes

1. Click "Add or Remove Scopes"
2. Select these scopes:
   • ./auth/userinfo.email
   • ./auth/userinfo.profile
3. Click "Update"
4. Click "Save and Continue"

Test Users (Optional)

If your app is in testing mode, add test user emails. Otherwise, click "Save and Continue".

Step 3: Create OAuth Client ID

1. Go to APIs & Services → Credentials
2. Click "Create Credentials" → "OAuth client ID"
3. Select "Chrome Extension" as the application type
4. Enter a name (e.g., "My Extension OAuth")
5. Enter your Extension ID (the 32-character string from Part 3)
6. Click "Create"

Important

Enter ONLY the extension ID (32 characters), not the full URL.

Correct: abcdefghijklmnopqrstuvwxyzabcdef

Wrong: https://chrome.google.com/webstore/detail/...

Step 4: Save Your Credentials

After creation, you'll see:

• Client ID: 123456789-abcdefgh.apps.googleusercontent.com
• Client Secret: GOCSPX-xxxxxxxxxxxxx

Keep Your Secret Safe

Never commit your Client Secret to public repositories or include it in client-side code. ExtensionLogin stores it securely encrypted.

Part 5: Configure ExtensionLogin

Step 1: Add Credentials to Dashboard

1. Log in to app.extensionlogin.com
2. Go to Extensions and select your extension
3. Click the "Google OAuth" tab
4. Enter your:
   • Client ID
   • Client Secret
5. Click "Save"

Step 2: Update Your manifest.json

Now add the OAuth configuration to your extension:

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0.1",
  "permissions": [
    "identity",
    "storage"
  ],
  "host_permissions": [
    "https://api.extensionlogin.com/*"
  ],
  "oauth2": {
    "client_id": "123456789-abcdefgh.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  },
  "key": "YOUR_EXTENSION_PUBLIC_KEY"
}

Step 3: Add the Extension Key (Important!)

To ensure your local development uses the same extension ID:

1. Go to the Chrome Web Store Developer Dashboard
2. Click on your extension → "Package" tab
3. Copy the "Public key"
4. Add it to your manifest.json as the "key" field

This ensures that when you load your extension unpacked during development, it uses the same ID as the published version.

Step 4: Upload Updated Extension

1. Increment your version number in manifest.json
2. Create a new ZIP file
3. In the Developer Dashboard, click "Package" → "Upload new package"
4. Upload the new ZIP
5. Submit for review

Part 6: Test Your Integration

Local Testing

1. Go to chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select your extension folder
5. Verify the extension ID matches your published extension

Test Google Sign-In

import ExtensionLogin from 'extensionlogin';

// Create ExtensionLogin client
const extLogin = ExtensionLogin('el_live_xxxxxx');

// Test the Google sign-in flow using Chrome's identity API
document.getElementById('google-btn').addEventListener('click', async () => {
  chrome.identity.getAuthToken({ interactive: true }, async (token) => {
    if (chrome.runtime.lastError || !token) {
      console.error('Error:', chrome.runtime.lastError?.message || 'No token');
      return;
    }

    // Get user info from Google
    const response = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
      headers: { Authorization: `Bearer ${token}` }
    });
    const googleUser = await response.json();

    // Identify user with ExtensionLogin
    const result = await extLogin.identify({
      email: googleUser.email,
      name: googleUser.name,
      metadata: { googleId: googleUser.id, picture: googleUser.picture }
    });

    if (result.success) {
      console.log('Success! User:', googleUser.email);
    } else {
      console.error('Error:', result.error);
    }
  });
});

Multiple Extensions, One Google Project

You can create multiple OAuth credentials in a single Google Cloud project:

1. Go to APIs & Services → Credentials
2. Click "Create Credentials" → "OAuth client ID"
3. Create a new Chrome Extension credential
4. Enter the different extension ID

Each extension gets its own Client ID and Secret, but they share:

• The same Google Cloud project
• The same OAuth consent screen
• The same billing account

Troubleshooting

"Extension ID mismatch" Error

Cause: The extension ID in Google Cloud doesn't match your actual extension.

Solution:

1. Verify your extension ID in chrome://extensions/
2. Compare with the ID in Google Cloud Console
3. Make sure you've added the "key" field to manifest.json for local development

"OAuth client not found" Error

Cause: Incorrect Client ID in manifest.json.

Solution:

1. Copy the Client ID directly from Google Cloud Console
2. Ensure the full ID is used (ending in .apps.googleusercontent.com)

"Access blocked" Error

Cause: OAuth consent screen not properly configured.

Solution:

1. Check your OAuth consent screen is published (not in testing mode), OR
2. Add your test email to the test users list

Extension Rejected by Chrome Web Store

Common rejection reasons:

• Missing privacy policy: Add a privacy policy URL
• Insufficient permissions justification: Explain why you need each permission
• Misleading description: Ensure your description matches functionality
• Low quality: Add proper icons and screenshots

Summary Checklist

• [ ] Created extension with proper manifest.json
• [ ] Prepared assets (icons, screenshots)
• [ ] Registered as Chrome Web Store developer ($5 fee)
• [ ] Uploaded extension to Chrome Web Store
• [ ] Noted extension ID from dashboard
• [ ] Created Google Cloud project
• [ ] Configured OAuth consent screen
• [ ] Created OAuth Client ID for Chrome Extension
• [ ] Added credentials to ExtensionLogin dashboard
• [ ] Updated manifest.json with oauth2 config and key
• [ ] Uploaded updated extension
• [ ] Tested Google sign-in flow

Next Steps

• Google OAuth Integration - Implement sign-in in your extension
• CRM Integration - Send user data to your CRM
• SDK Methods - Complete SDK reference