ExtensionLogin

Appearance

Basic Integration ​

A minimal ExtensionLogin integration for Chrome extensions.

Overview ​

This example shows the simplest way to add user identification to your extension.

Project Structure ​

my-extension/
├── manifest.json
├── popup.html
├── popup.js
└── node_modules/
    └── extensionlogin/

Step 1: Manifest Configuration ​

json
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A simple extension with user login",

  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },

  "permissions": [
    "storage"
  ],

  "host_permissions": [
    "https://api.extensionlogin.com/*"
  ]
}

Step 2: HTML Structure ​

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Extension</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 320px;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f5f5;
    }

    h1 {
      font-size: 20px;
      margin-bottom: 16px;
      color: #1a1a1a;
    }

    .form-group {
      margin-bottom: 12px;
    }

    label {
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }

    input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
    }

    input:focus {
      outline: none;
      border-color: #3b82f6;
    }

    button {
      width: 100%;
      padding: 12px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 8px;
    }

    button:hover {
      background: #2563eb;
    }

    button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }

    .message {
      margin-top: 12px;
      padding: 10px;
      border-radius: 6px;
      font-size: 14px;
    }

    .message.success {
      background: #d1fae5;
      color: #065f46;
    }

    .message.error {
      background: #fee2e2;
      color: #991b1b;
    }

    .user-info {
      text-align: center;
    }

    .user-info h2 {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .user-info p {
      color: #666;
      margin-bottom: 16px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <!-- Login Form -->
  <div id="login-view">
    <h1>Welcome</h1>

    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="you@example.com">
    </div>

    <div class="form-group">
      <label for="name">Name (optional)</label>
      <input type="text" id="name" placeholder="John Doe">
    </div>

    <button id="submit-btn">Get Started</button>

    <div id="message" class="message hidden"></div>
  </div>

  <!-- User Dashboard -->
  <div id="user-view" class="user-info hidden">
    <h2 id="user-name">Welcome!</h2>
    <p id="user-email"></p>
    <button id="logout-btn">Sign Out</button>
  </div>

  <script type="module" src="popup.js"></script>
</body>
</html>

Step 3: JavaScript Implementation ​

javascript
import ExtensionLogin from 'extensionlogin';

// Initialize ExtensionLogin
ExtensionLogin.init({
  apiKey: 'el_live_your_api_key_here',
  autoIdentify: true
});

// DOM Elements
const loginView = document.getElementById('login-view');
const userView = document.getElementById('user-view');
const emailInput = document.getElementById('email');
const nameInput = document.getElementById('name');
const submitBtn = document.getElementById('submit-btn');
const logoutBtn = document.getElementById('logout-btn');
const messageEl = document.getElementById('message');
const userNameEl = document.getElementById('user-name');
const userEmailEl = document.getElementById('user-email');

// Check for existing user
const currentUser = ExtensionLogin.getUser();
if (currentUser) {
  showUserView(currentUser);
}

// Handle login
submitBtn.addEventListener('click', async () => {
  const email = emailInput.value.trim();
  const name = nameInput.value.trim();

  // Validate
  if (!email) {
    showMessage('Please enter your email', 'error');
    return;
  }

  // Disable button during request
  submitBtn.disabled = true;
  submitBtn.textContent = 'Please wait...';

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

    if (result.success) {
      showUserView(result.user);
    } else {
      showMessage(result.error.message, 'error');
    }
  } catch (error) {
    showMessage('Connection error. Please try again.', 'error');
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = 'Get Started';
  }
});

// Handle logout
logoutBtn.addEventListener('click', async () => {
  await ExtensionLogin.logout();
  showLoginView();
});

// UI Helpers
function showUserView(user) {
  loginView.classList.add('hidden');
  userView.classList.remove('hidden');

  userNameEl.textContent = `Welcome, ${user.name || 'User'}!`;
  userEmailEl.textContent = user.email;
}

function showLoginView() {
  userView.classList.add('hidden');
  loginView.classList.remove('hidden');

  emailInput.value = '';
  nameInput.value = '';
  messageEl.classList.add('hidden');
}

function showMessage(text, type) {
  messageEl.textContent = text;
  messageEl.className = `message ${type}`;
}

Step 4: Build Configuration ​

Using Webpack ​

javascript
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './popup.js',
  output: {
    filename: 'popup.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production'
};

Using Rollup ​

javascript
// rollup.config.js
export default {
  input: 'popup.js',
  output: {
    file: 'dist/popup.bundle.js',
    format: 'iife'
  }
};

Using Vite ​

javascript
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        popup: 'popup.html'
      }
    }
  }
});

Without a Bundler ​

If you prefer not to use a bundler, use the CDN:

html
<script src="https://cdn.jsdelivr.net/npm/extensionlogin@latest/dist/extensionlogin.min.js"></script>
<script>
  // ExtensionLogin is available as a global
  window.ExtensionLogin.init({
    apiKey: 'el_live_your_api_key_here'
  });

  // ... rest of your code
</script>

Testing ​

  1. Load your extension in Chrome:

    • Go to chrome://extensions
    • Enable "Developer mode"
    • Click "Load unpacked"
    • Select your extension folder

  2. Click the extension icon to open the popup

  3. Enter an email and click "Get Started"

  4. Verify the user appears in your ExtensionLogin dashboard

Next Steps ​

Built for Chrome Extension Developers

Copyright 2025 ExtensionLogin