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.
| Popup | Side Panel | Sync Host | |
|---|---|---|---|
| Email + OTP | ✅ | ✅ | ✅ |
| Email + Link | ✅ | ||
| Email + Password | ✅ | ✅ | ✅ |
| Username + Password | ✅ | ✅ | ✅ |
| SMS + OTP | ✅ | ✅ | ✅ |
| OAuth | ✅ | ||
| Google One Tap | ✅ | ||
| SAML | ✅ | ||
| Passkeys | ✅ | ✅ | ✅ |
| Web3 | ✅ |
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
Last updated on