ExtensionLogin

Appearance

Quick Start ​

Get ExtensionLogin working in your Chrome extension in 5 minutes.

Prerequisites ​

  • A Chrome extension (Manifest V3 recommended)
  • Node.js and npm (for installing the SDK)
  • An ExtensionLogin account

Step 1: Create an Account ​

  1. Go to app.extensionlogin.com
  2. Sign up with your email
  3. Verify your email address

Step 2: Create an Application ​

  1. In the dashboard, click "New Extension"
  2. Enter your extension's name
  3. (Optional) Add your extension ID for additional security
  4. Click "Create"
  5. Copy your API key - you'll need this in the next step

Keep Your API Key Safe

Your API key identifies your extension. Don't commit it to public repositories. Use environment variables or a build process to inject it.

Step 3: Install the SDK ​

Install the ExtensionLogin SDK in your extension project:

bash
npm install extensionlogin

Or use a CDN in your HTML:

html
<script src="https://cdn.jsdelivr.net/npm/extensionlogin@latest/dist/extensionlogin.min.js"></script>

Step 4: Initialize the SDK ​

In your extension's main script (popup, background, or content script):

javascript
import ExtensionLogin from 'extensionlogin';

// Initialize with your API key
ExtensionLogin.init({
  apiKey: 'el_live_xxxxxxxxxxxxxx' // Replace with your actual API key
});

Step 5: Identify Users ​

When a user logs in or provides their information:

javascript
// Basic identification
const result = await ExtensionLogin.identify({
  email: 'user@example.com',
  name: 'John Doe'
});

if (result.success) {
  console.log('User identified!', result.user);
  // User data has been captured and sent to your CRMs
} else {
  console.error('Error:', result.error);
}

Step 6: Configure CRM (Optional) ​

To automatically send user data to your CRM:

  1. In the dashboard, go to "CRM Connections"
  2. Click "Add Connection"
  3. Select your CRM type (ClickFunnels, GoHighLevel, or Webhook)
  4. Enter your CRM credentials
  5. Go to your extension's settings and link the CRM connection

Now every identify() call will automatically send data to your CRM!

Complete Example ​

Here's a complete popup implementation:

html
<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: system-ui, sans-serif;
    }
    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    button {
      width: 100%;
      padding: 10px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #2563eb;
    }
    .success {
      color: green;
      margin-top: 10px;
    }
    .error {
      color: red;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h2>Welcome!</h2>
  <div id="login-form">
    <input type="email" id="email" placeholder="Enter your email">
    <input type="text" id="name" placeholder="Enter your name">
    <button id="submit">Get Started</button>
  </div>
  <div id="message"></div>

  <script type="module" src="popup.js"></script>
</body>
</html>
javascript
import ExtensionLogin from 'extensionlogin';

// Initialize ExtensionLogin
ExtensionLogin.init({
  apiKey: 'el_live_xxxxxxxxxxxxxx'
});

// Handle form submission
document.getElementById('submit').addEventListener('click', async () => {
  const email = document.getElementById('email').value;
  const name = document.getElementById('name').value;
  const messageEl = document.getElementById('message');

  if (!email) {
    messageEl.className = 'error';
    messageEl.textContent = 'Please enter your email';
    return;
  }

  try {
    const result = await ExtensionLogin.identify({
      email,
      name: name || undefined
    });

    if (result.success) {
      messageEl.className = 'success';
      messageEl.textContent = 'Welcome! You are now logged in.';

      // Store user info locally if needed
      chrome.storage.local.set({ user: result.user });
    } else {
      messageEl.className = 'error';
      messageEl.textContent = result.error || 'Something went wrong';
    }
  } catch (error) {
    messageEl.className = 'error';
    messageEl.textContent = 'Network error. Please try again.';
  }
});
json
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage"
  ],
  "host_permissions": [
    "https://api.extensionlogin.com/*"
  ]
}

Next Steps ​

Built for Chrome Extension Developers

Copyright 2025 ExtensionLogin