Docs

Chrome Extension SDK

Clerk provides a Chrome Extension SDK that allows you to easily integrate Clerk into your Chrome Extension. This SDK provides a simple way to authenticate users and manage their sessions.

Authentication options

When creating your Clerk application in the Clerk Dashboard, your authentication options will depend on how you configure your Chrome Extension. You can configure your Chrome Extension to behave as one of the following:

  • Popup - Opens as a popup. This is the default behavior.
  • Side Panel - Opens in a side panel
  • Sync Host - Deployed alongside a web app that uses Sync Host.

See the following table to determine the authentication options available for each configuration.

PopupSide PanelSync Host
Email + OTP
Email + Link
Email + Password
Username + Password
SMS + OTP
OAuth
Google One Tap
SAML
Passkeys
Web3

Warning

Our Chrome Extension SDK currently does not fully support Sync Host on side panels. Currently, if a user authenticates in your web app, they need to close and reopen the side panel to update their auth status.

Sync auth status between your Chrome Extension and web app

Clerk allows you to sync the authentication state from your web app to your Chrome Extension using the Sync Host feature. When a user authenticates in your web app, they will also be authenticated in your Chrome Extension. See the dedicated guide for more information.

createClerkClient()

It's recommended to use createClerkClient() for Chrome Extension's that need to interact with Clerk in a content script.

The createClerkClient() helper initializes a new Clerk instance on demand and refreshes the session token if there is a valid, signed-in user. It can be used in a content script or a background service worker to access a user's information or session token. Learn more about createClerkClient().

Add React Router

Learn how to add React Router to your Chrome Extension to enable routing in your application.

Deploy your extension to production

See the Chrome Extension deployment guide for information about deploying your extension to production.

Configure a consistent CRX ID

A Chrome Extension can be identified by its unique CRX ID, similar to how a website can be identified by its domain. The CRX ID rotates by default, which can cause errors with the Clerk integration. Learn how to configure a consistent CRX ID so that your extension will have a stable, unchanging key.

Feedback

What did you think of this content?

Last updated on