Chrome Extension Entwicklung: Google Login & Drupal API Integration

Die Entwicklung von Browser-Erweiterungen bietet mächtige Möglichkeiten, Arbeitsabläufe zu optimieren und Systeme miteinander zu verknüpfen. In diesem Artikel zeige ich, wie man eine Google Chrome Extension baut, die sich per Google OAuth2 authentifiziert und anschließend Daten von einer Drupal-basierten API abruft.

[!NOTE] Real-World Use Case: Diese Architektur habe ich erfolgreich für eine LinkedIn Automatisierungs-Software eingesetzt, die auf Drupal 11 basiert. Die Extension ermöglicht es Nutzern, direkt im Browser Aktionen zu steuern, während Drupal 11 im Hintergrund als leistungsstarkes Backend die Business-Logik und Datenverwaltung übernimmt.

Diese Kombination ist besonders spannend für Enterprise-Szenarien, in denen Mitarbeiter direkt aus dem Browser heraus auf Intranet-Inhalte oder CRM-Daten zugreifen sollen, ohne sich separat einloggen zu müssen.

Die Architektur

Das Zusammenspiel der Komponenten sieht wie folgt aus:

1. Chrome Extension: Das Frontend, das im Browser läuft (Popup oder Sidebar).
2. Google Identity Services: Für den sicheren Login (Single Sign-On).
3. Drupal 11 Backend: Dient als Headless CMS und API-Quelle.

1. Das Manifest (manifest.json)

Das Herzstück jeder Extension ist die manifest.json. Für unsere Anforderungen (Manifest V3) benötigen wir spezifische Berechtigungen:

{
  "manifest_version": 3,
  "name": "Drupal Connect Extension",
  "version": "1.0",
  "permissions": [
    "identity",
    "storage"
  ],
  "oauth2": {
    "client_id": "DEINE_GOOGLE_CLIENT_ID.apps.googleusercontent.com",
    "scopes": [
      "openid",
      "email",
      "profile"
    ]
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Wichtig: Die client_id erhältst du in der Google Cloud Console. Dort muss auch die Extension-ID als zulässiger Ursprung hinterlegt werden.

2. Google Login Implementierung

Dank der chrome.identity API ist der Login-Prozess relativ schlank. Im background.js oder direkt im Popup-Skript können wir das Token anfordern:

// auth.js
function getAuthToken() {
  return new Promise((resolve, reject) => {
    chrome.identity.getAuthToken({ interactive: true }, function(token) {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError);
      } else {
        resolve(token);
      }
    });
  });
}

Dieses Token ist der Schlüssel. Es beweist, dass der Nutzer authentifiziert ist.

3. Die Drupal API vorbereiten

Auf der Drupal-Seite benötigen wir eine Möglichkeit, dieses Google-Token zu validieren. Hierfür eignet sich das Simple OAuth Modul oder eine Custom-Lösung, die den id_token von Google gegen einen Drupal-User matcht.

Ein typischer Flow wäre:

1. Extension sendet Google-Token an Drupal Endpoint (z.B. /api/auth/google).
2. Drupal validiert das Token bei Google.
3. Wenn valide: Drupal sucht den User anhand der E-Mail-Adresse.
4. Drupal erstellt eine Session oder gibt ein eigenes Access-Token (z.B. JWT) zurück.

4. Datenabruf in der Extension

Sobald wir authentifiziert sind, können wir Anfragen an die Drupal API stellen. Hier ein Beispiel, wie man Nodes abruft:

async function fetchDrupalContent() {
  try {
    const googleToken = await getAuthToken();
    
    // Schritt 1: Authentifizierung bei Drupal (Exchange Token)
    const loginResponse = await fetch('https://dein-drupal-backend.de/api/login/google', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ token: googleToken })
    });
    
    const sessionData = await loginResponse.json();
    const drupalToken = sessionData.access_token;

    // Schritt 2: Content abrufen
    const contentResponse = await fetch('https://dein-drupal-backend.de/jsonapi/node/article', {
      headers: {
        'Authorization': `Bearer ${drupalToken}`,
        'Accept': 'application/vnd.api+json'
      }
    });

    const data = await contentResponse.json();
    renderContent(data);

  } catch (error) {
    console.error('Fehler beim Datenabruf:', error);
  }
}

Herausforderungen und Best Practices

• Token Refresh: Access Tokens laufen ab. Implementiere eine Logik, die Tokens automatisch erneuert, ohne den User zu stören.
• CORS: Stelle sicher, dass dein Drupal-Server Cross-Origin Resource Sharing (CORS) für die Extension-ID erlaubt.
• Sicherheit: Speichere Tokens niemals im localStorage, sondern nutze chrome.storage.local oder behalte sie nur im Speicher.

Fazit

Die Verbindung von Chrome Extensions mit einer Drupal API eröffnet spannende Möglichkeiten für maßgeschneiderte Unternehmensanwendungen. Durch die Nutzung von Google Login wird die Hürde für die Endanwender minimiert, während Drupal im Hintergrund als robuste Datenbasis dient.

Brauchst du Unterstützung bei Chrome Extensions & Drupal?

Planst du eine ähnliche Integration oder benötigst Hilfe bei der Entwicklung einer komplexen Web-Anwendung mit Drupal 11? Ich unterstütze dich gerne von der Konzeption bis zur Umsetzung.

Jetzt Projekt anfragen