feat(chrome-extension): Create js only create clerk client for extensions by royanger · Pull Request #7935 · clerk/javascript

royanger · 2026-02-25T23:07:57Z

Description

Customers want to be able to use Clerk in JS-only Chrome Extensions, either when building new or when switching an existing extension to Clerk.

This PR adds the /client import path for using createClerkClient() without React.

import { createClerkClient } from '@clerk/chrome-extension/client';

const publishableKey = process.env.CLERK_PUBLISHABLE_KEY;
if (!publishableKey) {
  throw new Error('Missing CLERK_PUBLISHABLE_KEY in .env');
}

const clerk = createClerkClient({ publishableKey });

This deprecates the previous /background only import:

 * // Before (deprecated):
 * import { createClerkClient } from '@clerk/chrome-extension/background';
 * const clerk = await createClerkClient({ publishableKey: 'pk_...' });
 *
 * // After:
 * import { createClerkClient } from '@clerk/chrome-extension/client';
 * const clerk = await createClerkClient({ publishableKey: 'pk_...', background: true });
 */

This also adds a JS only Chrome Extension playground in playground/browser-extension-js.

The latest snapshot works with the new Chrome Extension JS Quickstart repo

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Release Notes

New Features
- createClerkClient() now available from @clerk/chrome-extension/client
- New browser extension playground with authentication interface and user profile display
Deprecations
- createClerkClient() from @clerk/chrome-extension/background is deprecated
Documentation
- Updated README with revised usage examples and playground guidance

…ilable

vercel · 2026-02-25T23:08:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Feb 27, 2026 8:47pm

changeset-bot · 2026-02-25T23:08:02Z

🦋 Changeset detected

Latest commit: 176f5ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/chrome-extension	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

royanger · 2026-02-26T18:49:55Z

!snapshot

clerk-cookie · 2026-02-26T18:52:22Z

Hey @royanger - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.3.0-snapshot.v20260226185040
@clerk/astro	3.0.0-snapshot.v20260226185040
@clerk/backend	3.0.0-snapshot.v20260226185040
@clerk/chrome-extension	3.0.0-snapshot.v20260226185040
@clerk/clerk-js	6.0.0-snapshot.v20260226185040
@clerk/dev-cli	1.0.0-snapshot.v20260226185040
@clerk/expo	3.0.0-snapshot.v20260226185040
@clerk/expo-passkeys	1.0.0-snapshot.v20260226185040
@clerk/express	2.0.0-snapshot.v20260226185040
@clerk/fastify	2.7.0-snapshot.v20260226185040
@clerk/localizations	4.0.0-snapshot.v20260226185040
@clerk/msw	0.0.1-snapshot.v20260226185040
@clerk/nextjs	7.0.0-snapshot.v20260226185040
@clerk/nuxt	2.0.0-snapshot.v20260226185040
@clerk/react	6.0.0-snapshot.v20260226185040
@clerk/react-router	3.0.0-snapshot.v20260226185040
@clerk/shared	4.0.0-snapshot.v20260226185040
@clerk/tanstack-react-start	1.0.0-snapshot.v20260226185040
@clerk/testing	2.0.0-snapshot.v20260226185040
@clerk/ui	1.0.0-snapshot.v20260226185040
@clerk/upgrade	2.0.0-snapshot.v20260226185040
@clerk/vue	2.0.0-snapshot.v20260226185040

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260226185040 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260226185040 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260226185040 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260226185040 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260226185040 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260226185040 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260226185040 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260226185040 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260226185040 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260226185040 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260226185040 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260226185040 --save-exact

…ensions

royanger · 2026-02-26T22:01:18Z

!snapshot

clerk-cookie · 2026-02-26T22:03:43Z

Hey @royanger - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.3.0-snapshot.v20260226220202
@clerk/astro	3.0.0-snapshot.v20260226220202
@clerk/backend	3.0.0-snapshot.v20260226220202
@clerk/chrome-extension	3.0.0-snapshot.v20260226220202
@clerk/clerk-js	6.0.0-snapshot.v20260226220202
@clerk/dev-cli	1.0.0-snapshot.v20260226220202
@clerk/expo	3.0.0-snapshot.v20260226220202
@clerk/expo-passkeys	1.0.0-snapshot.v20260226220202
@clerk/express	2.0.0-snapshot.v20260226220202
@clerk/fastify	2.7.0-snapshot.v20260226220202
@clerk/localizations	4.0.0-snapshot.v20260226220202
@clerk/msw	0.0.1-snapshot.v20260226220202
@clerk/nextjs	7.0.0-snapshot.v20260226220202
@clerk/nuxt	2.0.0-snapshot.v20260226220202
@clerk/react	6.0.0-snapshot.v20260226220202
@clerk/react-router	3.0.0-snapshot.v20260226220202
@clerk/shared	4.0.0-snapshot.v20260226220202
@clerk/tanstack-react-start	1.0.0-snapshot.v20260226220202
@clerk/testing	2.0.0-snapshot.v20260226220202
@clerk/ui	1.0.0-snapshot.v20260226220202
@clerk/upgrade	2.0.0-snapshot.v20260226220202
@clerk/vue	2.0.0-snapshot.v20260226220202

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260226220202 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260226220202 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260226220202 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260226220202 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260226220202 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260226220202 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260226220202 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260226220202 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260226220202 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260226220202 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260226220202 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260226220202 --save-exact

coderabbitai · 2026-02-26T22:57:15Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 605434a and 176f5ba.

📒 Files selected for processing (1)

playground/browser-extension-js/src/popup.ts

📝 Walkthrough

Walkthrough

This pull request refactors the @clerk/chrome-extension package to restructure the createClerkClient() function exports and implementation. A new shared utility (utils/clerk-client.ts) with overloaded function signatures supports both foreground and background Clerk client creation. The function is now exported from a new public path (@clerk/chrome-extension/client), with the background export deprecated. Package exports are updated to include the new client subpath. The build configuration is updated to include the client entry point. Additionally, a new browser extension playground (playground/browser-extension-js) is introduced with complete scaffold including manifest, HTML, CSS, TypeScript source, and build configuration. Tests and documentation are added to cover the changes.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title partially describes the main change but lacks clarity and contains unclear phrasing ('Create js only create') that does not convey the intent precisely.	Clarify the title to better convey the intent, e.g., 'feat(chrome-extension): Add JavaScript-only client export for extensions' or similar to reduce ambiguity.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/wild-pianos-matter.md:
- Around line 12-15: Fix the typos in the changeset: remove the stray trailing
single quote after the semicolon in the line declaring const clerk =
createClerkClient({ publishableKey }); and correct the misspelled function name
createClerkCleint to createClerkClient in the background worker example (the
line starting with const clerk = await createClerkClient(...)); keep the
existing await and background: true options intact.

In `@packages/chrome-extension/README.md`:
- Line 81: Typo in the README: replace the misspelled token `reasct-router` with
the correct `react-router` in the bullet that begins "SyncHost, Service Workers
and `react-router`" so the displayed link text and code-formatted token read
"react-router" consistently; update only the README.md bullet text containing
`reasct-router`.

In `@playground/browser-extension-js/src/popup.ts`:
- Around line 95-100: The createInfoRow function uses innerHTML with
interpolated label/value which can allow XSS if those strings are ever
untrusted; change createInfoRow to build the row with createElement and assign
textContent (or setAttribute for classes) to the label and value spans instead
of using innerHTML so the values are escaped and not interpreted as HTML.

ℹ️ Review info

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 64af60c and 99b151a.

⛔ Files ignored due to path filters (1)

packages/chrome-extension/src/__tests__/__snapshots__/client-exports.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (25)

.changeset/wild-pianos-matter.md
.gitignore
packages/chrome-extension/README.md
packages/chrome-extension/client/package.json
packages/chrome-extension/package.json
packages/chrome-extension/src/__tests__/client-exports.test.ts
packages/chrome-extension/src/background/clerk.ts
packages/chrome-extension/src/client/index.ts
packages/chrome-extension/src/utils/__tests__/clerk-client.test.ts
packages/chrome-extension/src/utils/clerk-client.ts
packages/chrome-extension/tsup.config.ts
playground/browser-extension-js/.env
playground/browser-extension-js/.env.example
playground/browser-extension-js/.gitignore
playground/browser-extension-js/README.md
playground/browser-extension-js/build/manifest.json
playground/browser-extension-js/build/popup.css
playground/browser-extension-js/build/popup.html
playground/browser-extension-js/esbuild.config.mjs
playground/browser-extension-js/package.json
playground/browser-extension-js/pnpm-workspace.yaml
playground/browser-extension-js/src/popup.ts
playground/browser-extension-js/tsconfig.json
playground/browser-extension/README.md
playground/browser-extension/package.json

.changeset/wild-pianos-matter.md

packages/chrome-extension/README.md

playground/browser-extension-js/src/popup.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

tmilewski

This LGTM! Just check the .env and the one CR comment. 🚀

playground/browser-extension-js/.env

playground/browser-extension-js/src/popup.ts

pkg-pr-new · 2026-02-27T20:00:47Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7935

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7935

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7935

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7935

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7935

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7935

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7935

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7935

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7935

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7935

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@7935

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7935

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7935

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7935

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7935

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7935

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7935

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7935

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7935

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7935

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7935

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7935

commit: 176f5ba

…ensions

royanger added 3 commits February 13, 2026 20:05

feat: Refactor createClerkClient to make a client JS only version ava…

85fb518

…ilable

Merge branch 'main' into roy/create-new-extension-js-package

3c386e9

feat: Added JS only Chrome Extension to playground apps

dc81846

github-actions bot added chrome-extension playground core-3 labels Feb 25, 2026

royanger changed the title ~~Create js only create clerk client for extensions~~ feat(chrome-extension): Create js only create clerk client for extensions Feb 25, 2026

royanger added 2 commits February 26, 2026 15:34

fix: Enable UI components in client createClerkClient

768bbd1

refactor: Swapped from bun to esbuild, other changes to playground app

772fe39

vercel bot deployed to Preview February 26, 2026 21:48 View deployment

Merge branch 'main' into roy/create-js-only-createClerkClient-for-ext…

2f5d4ca

…ensions

vercel bot deployed to Preview February 26, 2026 21:51 View deployment

royanger added 2 commits February 26, 2026 17:39

test: Added tests

8f6f41e

chore: Added changeset

99b151a

royanger marked this pull request as ready for review February 26, 2026 22:53

royanger requested a review from tmilewski February 26, 2026 22:53

vercel bot deployed to Preview February 26, 2026 22:53 View deployment

coderabbitai bot reviewed Feb 26, 2026

View reviewed changes

.changeset/wild-pianos-matter.md Outdated Show resolved Hide resolved

packages/chrome-extension/README.md Outdated Show resolved Hide resolved

playground/browser-extension-js/src/popup.ts Show resolved Hide resolved

royanger mentioned this pull request Feb 26, 2026

Added guide for new JS only createClerkClient for Chrome Extensions clerk/clerk-docs#3146

Draft

Apply suggestions from code review

605434a

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

vercel bot deployed to Preview February 27, 2026 19:57 View deployment

tmilewski requested changes Feb 27, 2026

View reviewed changes

playground/browser-extension-js/.env Outdated Show resolved Hide resolved

playground/browser-extension-js/src/popup.ts Show resolved Hide resolved

royanger added 2 commits February 27, 2026 15:43

Merge branch 'main' into roy/create-js-only-createClerkClient-for-ext…

e323a52

…ensions

fix: Applied review suggestions

176f5ba

vercel bot deployed to Preview February 27, 2026 20:47 View deployment

Conversation

royanger commented Feb 25, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Release Notes

Uh oh!

vercel bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

royanger commented Feb 26, 2026

Uh oh!

clerk-cookie commented Feb 26, 2026

Uh oh!

royanger commented Feb 26, 2026

Uh oh!

clerk-cookie commented Feb 26, 2026

Uh oh!

coderabbitai bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tmilewski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

royanger commented Feb 25, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Feb 25, 2026 •

edited

Loading

changeset-bot bot commented Feb 25, 2026 •

edited

Loading

coderabbitai bot commented Feb 26, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 27, 2026 •

edited

Loading