"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einführung", "hProperties": { "id": "einführung" } }, "depth": 2, "value": "Einführung" }, { "data": { "id": "erstellen-sie-eine-logto-anwendung", "hProperties": { "id": "erstellen-sie-eine-logto-anwendung" } }, "depth": 2, "value": "Erstellen Sie eine Logto-Anwendung" }, { "data": { "id": "richten-sie-ihre-chrome-erweiterung-ein", "hProperties": { "id": "richten-sie-ihre-chrome-erweiterung-ein" } }, "depth": 2, "value": "Richten Sie Ihre Chrome-Erweiterung ein" }, { "data": { "id": "logto-sdk-installieren", "hProperties": { "id": "logto-sdk-installieren" } }, "depth": 3, "value": "Logto SDK installieren" }, { "data": { "id": "aktualisieren-sie-die-manifestjson", "hProperties": { "id": "aktualisieren-sie-die-manifestjson" } }, "depth": 3, "value": "Aktualisieren Sie die manifest.json" }, { "data": { "id": "richten-sie-ein-hintergrundskript-service-worker-ein", "hProperties": { "id": "richten-sie-ein-hintergrundskript-service-worker-ein" } }, "depth": 3, "value": "Richten Sie ein Hintergrundskript (Service Worker) ein" }, { "data": { "id": "logto-anwendungseinstellungen-aktualisieren", "hProperties": { "id": "logto-anwendungseinstellungen-aktualisieren" } }, "depth": 2, "value": "Logto-Anwendungseinstellungen aktualisieren" }, { "data": { "id": "anmelde--und-abmelde-buttons-zum-popup-hinzufügen", "hProperties": { "id": "anmelde--und-abmelde-buttons-zum-popup-hinzufügen" } }, "depth": 2, "value": "Anmelde- und Abmelde-Buttons zum Popup hinzufügen" }, { "data": { "id": "checkpoint-testen-des-authentifizierungsprozesses", "hProperties": { "id": "checkpoint-testen-des-authentifizierungsprozesses" } }, "depth": 2, "value": "Checkpoint: Testen des Authentifizierungsprozesses" }, { "data": { "id": "authentifizierungsstatus-überprüfen", "hProperties": { "id": "authentifizierungsstatus-überprüfen" } }, "depth": 2, "value": "Authentifizierungsstatus überprüfen" }, { "data": { "id": "weitere-überlegungen", "hProperties": { "id": "weitere-überlegungen" } }, "depth": 2, "value": "Weitere Überlegungen" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 4, "words": 1280, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Chrome-Erweiterungen sind eine großartige Möglichkeit, die Funktionalität des Chrome-Browsers zu erweitern. Wenn Sie eine beliebte Erweiterung haben, möchten Sie sie möglicherweise monetarisieren, indem Sie Pro-Funktionen für Benutzer anbieten, die dafür bezahlen. Die Benutzer-Authentifizierung ist dafür unerlässlich:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Benutzeridentifikation" }), ": Sie müssen wissen, wer der Benutzer ist, um personalisierte Funktionen bereitzustellen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Zugangskontrolle" }), ": Sie müssen kontrollieren, wer auf die kostenpflichtigen Funktionen zugreifen kann."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Abo-Verwaltung" }), ": Sie müssen eine Möglichkeit bieten, damit Benutzer ihre Abonnements verwalten können."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Auf der anderen Seite wollen wir nicht am Google-Kontosystem hängen bleiben, da Ihre Benutzer möglicherweise andere Konten bevorzugen oder Sie mehrere Dienste haben, die Sie mit demselben Identitätssystem integrieren möchten." }), "\n", _jsx(_components.p, { children: "Eine kurze Zusammenfassung der Vorteile von OpenID Connect (OIDC) für die Authentifizierung:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keine Anbieterbindung" }), ": Ihre Benutzer können verschiedene Methoden nutzen, um sich einzuloggen, anstatt gezwungen zu sein, Google zu verwenden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Single Sign-On (SSO)" }), ": Benutzer können sich einmal anmelden und auf mehrere Dienste oder Anwendungen zugreifen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Standardisiert" }), ": OIDC ist ein offener Standard, der weit verbreitet und unterstützt ist, und außerdem sicher."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["In diesem Tutorial verwenden wir ", _jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " als OIDC-Anbieter, eine Auth0-Alternative zum Aufbau von Identitätsinfrastrukturen."] }), "\n", _jsx(_components.p, { children: "Lassen Sie uns beginnen!" }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Sie finden ein Beispielprojekt für dieses Tutorial in ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "unserem GitHub-Repository" }), "."] }) }), "\n", _jsxs(_components.h2, { id: "einführung", children: ["Einführung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einführung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Wenn Sie einen \"Anmelden\"-Button im Popup Ihrer Chrome-Erweiterung platzieren, sieht der Authentifizierungsprozess wie folgt aus:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant A as Erweiterungspopup\n participant B as Erweiterungs-Dienstmitarbeiter\n participant C as Logto-Anmeldeerlebnis\n\n A->>B: Leitet Anmeldung ein\n B->>C: Leitet zu Logto weiter\n C->>C: Benutzer meldet sich an\n C->>B: Leitet zurück zur Erweiterung\n B->>A: Benachrichtigt das Popup\n" }) }), "\n", _jsxs(_components.p, { children: ["Für andere interaktive Seiten in Ihrer Erweiterung müssen Sie einfach den ", _jsx(_components.code, { children: "Erweiterungspopup" }), "-Teilnehmer durch den Namen der Seite ersetzen. In diesem Tutorial konzentrieren wir uns auf die Popup-Seite."] }), "\n", _jsxs(_components.h2, { id: "erstellen-sie-eine-logto-anwendung", children: ["Erstellen Sie eine Logto-Anwendung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erstellen-sie-eine-logto-anwendung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Um loszulegen, erstellen Sie eine Logto-Anwendung mit dem Typ \"Einzelseiten-App\". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu erstellen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Melden Sie sich in der ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto-Konsole" }), " an."] }), "\n", _jsxs(_components.li, { children: ["Klicken Sie auf ", _jsx(_components.strong, { children: "Anwendung erstellen" }), "."] }), "\n", _jsx(_components.li, { children: "Finden Sie auf der geöffneten Seite den Button \"App ohne Framework erstellen\" unten und klicken Sie darauf." }), "\n", _jsx(_components.li, { children: "Wählen Sie den Typ \"Einzelseiten-App\" aus und geben Sie den Namen Ihrer Anwendung ein." }), "\n", _jsxs(_components.li, { children: ["Klicken Sie auf ", _jsx(_components.strong, { children: "Erstellen" }), "."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "richten-sie-ihre-chrome-erweiterung-ein", children: ["Richten Sie Ihre Chrome-Erweiterung ein", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#richten-sie-ihre-chrome-erweiterung-ein", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "logto-sdk-installieren", children: ["Logto SDK installieren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-sdk-installieren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Installieren Sie das Logto SDK in Ihrem Chrome-Erweiterungsprojekt:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# oder pnpm, yarn, etc.\nnpm i @logto/chrome-extension\n" }) }), "\n", _jsxs(_components.h3, { id: "aktualisieren-sie-die-manifestjson", children: ["Aktualisieren Sie die ", _jsx(_components.code, { children: "manifest.json" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aktualisieren-sie-die-manifestjson", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Das Logto SDK erfordert die folgenden Berechtigungen in der ", _jsx(_components.code, { children: "manifest.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"permissions\": [\"identity\", \"storage\"],\n \"host_permissions\": [\"https://*.logto.app/*\"]\n}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.identity" }), ": Erforderlich für die Chrome Identity API, die zum Ein- und Ausloggen verwendet wird."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.storage" }), ": Erforderlich zum Speichern der Benutzersitzung."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "host_permissions" }), ": Erforderlich, damit das Logto SDK mit den Logto-APIs kommunizieren kann."] }), "\n"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Wenn Sie eine benutzerdefinierte Domain auf Logto Cloud verwenden, müssen Sie die ", _jsx(_components.code, { children: "host_permissions" }), " aktualisieren, um Ihre Domain passend zu machen."] }) }), "\n", _jsxs(_components.h3, { id: "richten-sie-ein-hintergrundskript-service-worker-ein", children: ["Richten Sie ein Hintergrundskript (Service Worker) ein", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#richten-sie-ein-hintergrundskript-service-worker-ein", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Initialisieren Sie das Logto SDK im Hintergrundskript Ihrer Chrome-Erweiterung:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nimport LogtoClient from '@logto/chrome-extension';\n\nexport const client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Ersetzen Sie ", _jsx(_components.code, { children: "" }), " und ", _jsx(_components.code, { children: "" }), " durch die tatsächlichen Werte. Diese Werte finden Sie auf der Anwendungsseite, die Sie gerade in der Logto-Konsole erstellt haben."] }), "\n", _jsxs(_components.p, { children: ["Wenn Sie kein Hintergrundskript haben, können Sie der ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics", children: "offiziellen Anleitung" }), " folgen, um eines zu erstellen."] }), "\n", _jsxs(Info, { children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "Warum brauchen wir ein Hintergrundskript?" }) }), _jsx(_components.p, { children: "Normale Erweiterungsseiten wie das Popup oder die Optionsseite können nicht im Hintergrund laufen und haben die Möglichkeit, während des Authentifizierungsprozesses geschlossen zu werden. Ein Hintergrundskript stellt sicher, dass der Authentifizierungsprozess ordnungsgemäß abgewickelt werden kann." })] }), "\n", _jsx(_components.p, { children: "Dann müssen wir auf Nachrichten von anderen Erweiterungsseiten hören und den Authentifizierungsprozess verwalten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // Im folgenden Code müssen wir `sendResponse` aufrufen,\n // um den Absender zu benachrichtigen, da wir `true` für jede Aktion zurückgeben.\n // Sie können hier auch Fehler behandeln oder andere Wege nutzen, um den Absender zu benachrichtigen.\n\n if (message.action === 'signIn') {\n const redirectUri = chrome.identity.getRedirectURL('/callback');\n client.signIn(redirectUri).finally(sendResponse);\n return true;\n }\n\n if (message.action === 'signOut') {\n const redirectUri = chrome.identity.getRedirectURL();\n client.signOut(redirectUri).finally(sendResponse);\n return true;\n }\n\n return false;\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Sie werden bemerken, dass im obigen Code zwei Redirect-URIs verwendet werden. Sie werden beide von ", _jsx(_components.code, { children: "chrome.identity.getRedirectURL" }), " erstellt, einer ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/reference/api/identity#method-getRedirectURL", children: "eingebauten Chrome-API" }), ", um eine Umleitungs-URL für Auth-Flows zu generieren. Die beiden URIs werden sein:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), " für Anmeldung."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/" }), " für Abmeldung."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Beachten Sie, dass diese URIs nicht zugänglich sind und nur verwendet werden, um Chrome spezifische Aktionen für den Authentifizierungsprozess auszuführen." }), "\n", _jsxs(_components.h2, { id: "logto-anwendungseinstellungen-aktualisieren", children: ["Logto-Anwendungseinstellungen aktualisieren", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-anwendungseinstellungen-aktualisieren", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Nun müssen wir die Logto-Anwendungseinstellungen aktualisieren, um die Redirect-URIs zuzulassen, die wir gerade erstellt haben." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Gehen Sie zur Anwendungsseite in der Logto-Konsole." }), "\n", _jsxs(_components.li, { children: ["Fügen Sie im Abschnitt \"Redirect-URIs\" den URI hinzu: ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), "."] }), "\n", _jsxs(_components.li, { children: ["Fügen Sie im Abschnitt \"Redirect-URIs nach Abmeldung\" den URI hinzu: ", _jsx(_components.code, { children: "https://.chromiumapp.org/" }), "."] }), "\n", _jsxs(_components.li, { children: ["Fügen Sie im Abschnitt \"CORS erlaubte Ursprünge\" den URI hinzu: ", _jsx(_components.code, { children: "chrome-extension://" }), ". Das SDK in der Chrome-Erweiterung verwendet diesen Ursprung, um mit den Logto-APIs zu kommunizieren."] }), "\n", _jsxs(_components.li, { children: ["Klicken Sie auf ", _jsx(_components.strong, { children: "Änderungen speichern" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Denken Sie daran, ", _jsx(_components.code, { children: "" }), " durch Ihre tatsächliche Erweiterungs-ID zu ersetzen. Sie finden die Erweiterungs-ID auf der Seite ", _jsx(_components.code, { children: "chrome://extensions" }), "."] }), "\n", _jsx(_components.p, { children: "Nachdem Sie die Einstellungen aktualisiert haben, sollten Ihre Logto-Anwendungseinstellungen so aussehen:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/app_settings_f30c24be38.webp", alt: "Anwendungseinstellungen" }) }), "\n", _jsxs(_components.h2, { id: "anmelde--und-abmelde-buttons-zum-popup-hinzufügen", children: ["Anmelde- und Abmelde-Buttons zum Popup hinzufügen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#anmelde--und-abmelde-buttons-zum-popup-hinzufügen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Wir sind fast da! Lassen Sie uns die Anmelde- und Abmelde-Buttons und andere notwendige Logik zur Popup-Seite hinzufügen." }), "\n", _jsxs(_components.p, { children: ["In der ", _jsx(_components.code, { children: "popup.html" }), " Datei:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["In der ", _jsx(_components.code, { children: "popup.js" }), " Datei (angenommen, ", _jsx(_components.code, { children: "popup.js" }), " ist in der ", _jsx(_components.code, { children: "popup.html" }), " enthalten):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n // Anmeldung abgeschlossen (oder fehlgeschlagen), Sie können hier die Benutzeroberfläche aktualisieren.\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n // Abmeldung abgeschlossen (oder fehlgeschlagen), Sie können hier die Benutzeroberfläche aktualisieren.\n});\n" }) }), "\n", _jsxs(_components.h2, { id: "checkpoint-testen-des-authentifizierungsprozesses", children: ["Checkpoint: Testen des Authentifizierungsprozesses", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#checkpoint-testen-des-authentifizierungsprozesses", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Jetzt können Sie den Authentifizierungsfluss in Ihrer Chrome-Erweiterung testen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Öffnen Sie das Erweiterungspopup." }), "\n", _jsx(_components.li, { children: "Klicken Sie auf den \"Einloggen\"-Button." }), "\n", _jsx(_components.li, { children: "Sie werden zur Logto-Anmeldeseite weitergeleitet." }), "\n", _jsx(_components.li, { children: "Melden Sie sich mit Ihrem Logto-Konto an." }), "\n", _jsx(_components.li, { children: "Sie werden zurück zu Chrome weitergeleitet." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "authentifizierungsstatus-überprüfen", children: ["Authentifizierungsstatus überprüfen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#authentifizierungsstatus-überprüfen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Da Chrome einheitliche Speicher-APIs bereitstellt, können alle anderen Logto SDK-Methoden, abgesehen vom Ein- und Ausloggen, direkt auf der Popup-Seite verwendet werden." }), "\n", _jsxs(_components.p, { children: ["In Ihrem ", _jsx(_components.code, { children: "popup.js" }), " können Sie die ", _jsx(_components.code, { children: "LogtoClient" }), "-Instanz wiederverwenden, die im Hintergrundskript erstellt wurde, oder eine neue mit derselben Konfiguration erstellen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nimport LogtoClient from '@logto/chrome-extension';\n\nconst client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n\n// Oder die im Hintergrundskript erstellte Clientinstanz wiederverwenden\nimport { client } from './service-worker.js';\n" }) }), "\n", _jsx(_components.p, { children: "Dann können Sie eine Funktion erstellen, um den Authentifizierungsstatus und das Benutzerprofil zu laden:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nconst loadAuthenticationState = async () => {\n const isAuthenticated = await client.isAuthenticated();\n // Aktualisieren Sie die Benutzeroberfläche basierend auf dem Authentifizierungsstatus\n\n if (isAuthenticated) {\n const user = await client.getIdTokenClaims(); // { sub: '...', email: '...', ... }\n // Aktualisieren Sie die Benutzeroberfläche mit dem Benutzerprofil\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Sie können die ", _jsx(_components.code, { children: "loadAuthenticationState" }), " Funktion auch mit der Ein-/Auslogik kombinieren:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n await loadAuthenticationState();\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n await loadAuthenticationState();\n});\n" }) }), "\n", _jsx(_components.p, { children: "Hier ist ein Beispiel der Popup-Seite mit dem Authentifizierungsstatus:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/extension_popup_03b2ad10b2.webp", alt: "Popup-Seite" }) }), "\n", _jsxs(_components.p, { children: ["Für weitere Informationen über das SDK können Sie die ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/vanilla-js/", children: "offizielle Dokumentation des Browser-SDK" }), " einsehen. Das Browser-SDK teilt dieselben APIs mit dem Chrome-Erweiterung-SDK."] }), "\n", _jsxs(_components.h2, { id: "weitere-überlegungen", children: ["Weitere Überlegungen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#weitere-überlegungen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Bundling von Service-Workern" }), ": Wenn Sie einen Bundler wie Webpack oder Rollup verwenden, müssen Sie das Ziel explizit auf ", _jsx(_components.code, { children: "browser" }), " oder ähnlich setzen, um unnötiges Bundeln von Node.js-Modulen zu vermeiden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Modulauflösung" }), ": Das Logto Chrome-Erweiterung-SDK ist ein ESM-only-Modul."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Sehen Sie sich unser ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "Beispielprojekt" }), " für ein vollständiges Beispiel mit TypeScript, Rollup und anderen Konfigurationen an."] }), "\n", _jsxs(_components.h2, { id: "fazit", children: ["Fazit", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Mit authentifizierten Benutzern können Sie jetzt sicher kostenpflichtige Funktionen in Ihrer Chrome-Erweiterung anbieten. Zum Beispiel können Sie den Abonnementstatus des Benutzers im Benutzerprofil speichern und überprüfen, wenn der Benutzer die Erweiterung öffnet." }), "\n", _jsx(_components.p, { children: "In Kombination mit der Leistungsfähigkeit von Chrome-Erweiterungen und Logto können Sie eine flexiblere und anpassbarere Erweiterung entwickeln, die sowohl Ihnen als auch Ihren Benutzern gefällt." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }