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 ​

Initialize ExtensionLogin in your background service worker for persistent state:

javascript
// background.js
import ExtensionLogin from 'extensionlogin';

// Create the client instance with your API key
const extLogin = ExtensionLogin('el_live_xxxxxxxxxxxxxx');

// Start the background service (handles message passing)
extLogin.startBackground();

// Listen for login events
extLogin.onLogin.addListener((user) => {
  console.log('User logged in:', user.email);
});

// Listen for logout events
extLogin.onLogout.addListener(() => {
  console.log('User logged out');
});

In your popup, communicate with the background script:

javascript
// popup.js
import ExtensionLogin from 'extensionlogin';

// Create the client instance
const extLogin = ExtensionLogin('el_live_xxxxxxxxxxxxxx');

// Check if user is logged in
const user = await extLogin.getUser();
if (user) {
  console.log('Welcome back,', user.email);
}

Step 5: Identify Users ​

When a user logs in or provides their information:

javascript
// Identify the user (captures data and sends to CRMs)
const result = await extLogin.identify({
  email: '[email protected]',
  name: 'John Doe'
});

if (result.success) {
  console.log('User identified!');
  // 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';

// Create ExtensionLogin client
const extLogin = ExtensionLogin('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 extLogin.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({ userEmail: email });
    } else {
      messageEl.className = 'error';
      messageEl.textContent = result.error || 'Something went wrong';
    }
  } catch (error) {
    messageEl.className = 'error';
    messageEl.textContent = 'Network error. Please try again.';
  }
});
javascript
import ExtensionLogin from 'extensionlogin';

// Create and initialize the background service
const extLogin = ExtensionLogin('el_live_xxxxxxxxxxxxxx');
extLogin.startBackground();

console.log('ExtensionLogin background service started');
json
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": [
    "storage"
  ],
  "host_permissions": [
    "https://api.extensionlogin.com/*"
  ]
}

Next Steps ​

Built for Chrome Extension Developers

Copyright 2025 ExtensionLogin