feat(chrome-extension): Create js only create clerk client for extensions#7935
feat(chrome-extension): Create js only create clerk client for extensions#7935
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 99b151a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
changed the title
|
!snapshot |
|
Hey @royanger - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260226185040 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/fastify@2.7.0-snapshot.v20260226185040 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260226185040 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260226185040 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260226185040 --save-exact |
|
!snapshot |
|
Hey @royanger - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.3.0-snapshot.v20260226220202 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/fastify@2.7.0-snapshot.v20260226220202 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260226220202 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260226220202 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260226220202 --save-exact |
📝 WalkthroughWalkthroughThis pull request introduces a new client module for the 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
⛔ Files ignored due to path filters (1)
packages/chrome-extension/src/__tests__/__snapshots__/client-exports.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (25)
.changeset/wild-pianos-matter.md.gitignorepackages/chrome-extension/README.mdpackages/chrome-extension/client/package.jsonpackages/chrome-extension/package.jsonpackages/chrome-extension/src/__tests__/client-exports.test.tspackages/chrome-extension/src/background/clerk.tspackages/chrome-extension/src/client/index.tspackages/chrome-extension/src/utils/__tests__/clerk-client.test.tspackages/chrome-extension/src/utils/clerk-client.tspackages/chrome-extension/tsup.config.tsplayground/browser-extension-js/.envplayground/browser-extension-js/.env.exampleplayground/browser-extension-js/.gitignoreplayground/browser-extension-js/README.mdplayground/browser-extension-js/build/manifest.jsonplayground/browser-extension-js/build/popup.cssplayground/browser-extension-js/build/popup.htmlplayground/browser-extension-js/esbuild.config.mjsplayground/browser-extension-js/package.jsonplayground/browser-extension-js/pnpm-workspace.yamlplayground/browser-extension-js/src/popup.tsplayground/browser-extension-js/tsconfig.jsonplayground/browser-extension/README.mdplayground/browser-extension/package.json
| const clerk = createClerkClient({ publishableKey });' | ||
|
|
||
| // Use createClerkCleint in a background service worker | ||
| const clerk = await createClerkClient({ publishableKey: 'pk_...', background: true }); |
There was a problem hiding this comment.
Typos in changeset will appear in published changelog.
- Line 12: trailing quote after semicolon
- Line 14:
createClerkCleint→createClerkClient
Proposed fix
-const clerk = createClerkClient({ publishableKey });'
+const clerk = createClerkClient({ publishableKey });
-// Use createClerkCleint in a background service worker
+// Use createClerkClient in a background service worker📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const clerk = createClerkClient({ publishableKey });' | |
| // Use createClerkCleint in a background service worker | |
| const clerk = await createClerkClient({ publishableKey: 'pk_...', background: true }); | |
| const clerk = createClerkClient({ publishableKey }); | |
| // Use createClerkClient in a background service worker | |
| const clerk = await createClerkClient({ publishableKey: 'pk_...', background: true }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.changeset/wild-pianos-matter.md around lines 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.
| - [Standalone](https://github.com/clerk/clerk-chrome-extension-starter/tree/main): The extension is using its own authentication | ||
| - [WebSSO](https://github.com/clerk/clerk-chrome-extension-starter/tree/webapp_sso): The extensions shares authentication with a website in the same browser | ||
| - [Quickstart](https://github.com/clerk/clerk-chrome-extension-quickstart): The extension is using its own authentication | ||
| - [SyncHost, Service Workers and `react-router`](https://github.com/clerk/clerk-chrome-extension-demo): The extension shares auth with a website in the same browser, needs to access user information from Clerk in a service worker or needs to use `reasct-router` |
There was a problem hiding this comment.
Typo: "reasct-router" should be "react-router".
-- [SyncHost, Service Workers and `react-router`](https://github.com/clerk/clerk-chrome-extension-demo): The extension shares auth with a website in the same browser, needs to access user information from Clerk in a service worker or needs to use `reasct-router`
++ [SyncHost, Service Workers and `react-router`](https://github.com/clerk/clerk-chrome-extension-demo): The extension shares auth with a website in the same browser, needs to access user information from Clerk in a service worker or needs to use `react-router`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - [SyncHost, Service Workers and `react-router`](https://github.com/clerk/clerk-chrome-extension-demo): The extension shares auth with a website in the same browser, needs to access user information from Clerk in a service worker or needs to use `reasct-router` | |
| - [SyncHost, Service Workers and `react-router`](https://github.com/clerk/clerk-chrome-extension-demo): The extension shares auth with a website in the same browser, needs to access user information from Clerk in a service worker or needs to use `react-router` |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/chrome-extension/README.md` at 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`.
| function createInfoRow(label: string, value: string): HTMLDivElement { | ||
| const row = document.createElement('div'); | ||
| row.className = 'user-info-row'; | ||
| row.innerHTML = `<span class="info-label">${label}</span><span class="info-value">${value}</span>`; | ||
| return row; | ||
| } |
There was a problem hiding this comment.
Potential XSS via innerHTML with user data.
The createInfoRow function uses innerHTML with template literals containing user-supplied values (email, username). While the data originates from Clerk's backend, this pattern is unsafe if copied to production code. Consider using textContent or createElement for the spans:
Safer alternative using DOM APIs
function createInfoRow(label: string, value: string): HTMLDivElement {
const row = document.createElement('div');
row.className = 'user-info-row';
- row.innerHTML = `<span class="info-label">${label}</span><span class="info-value">${value}</span>`;
+ const labelSpan = document.createElement('span');
+ labelSpan.className = 'info-label';
+ labelSpan.textContent = label;
+ const valueSpan = document.createElement('span');
+ valueSpan.className = 'info-value';
+ valueSpan.textContent = value;
+ row.appendChild(labelSpan);
+ row.appendChild(valueSpan);
return row;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function createInfoRow(label: string, value: string): HTMLDivElement { | |
| const row = document.createElement('div'); | |
| row.className = 'user-info-row'; | |
| row.innerHTML = `<span class="info-label">${label}</span><span class="info-value">${value}</span>`; | |
| return row; | |
| } | |
| function createInfoRow(label: string, value: string): HTMLDivElement { | |
| const row = document.createElement('div'); | |
| row.className = 'user-info-row'; | |
| const labelSpan = document.createElement('span'); | |
| labelSpan.className = 'info-label'; | |
| labelSpan.textContent = label; | |
| const valueSpan = document.createElement('span'); | |
| valueSpan.className = 'info-value'; | |
| valueSpan.textContent = value; | |
| row.appendChild(labelSpan); | |
| row.appendChild(valueSpan); | |
| return row; | |
| } |
🧰 Tools
🪛 ast-grep (0.41.0)
[warning] 97-97: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: row.innerHTML = <span class="info-label">${label}</span><span class="info-value">${value}</span>
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
[warning] 97-97: Direct HTML content assignment detected. Modifying innerHTML, outerHTML, or using document.write with unsanitized content can lead to XSS vulnerabilities. Use secure alternatives like textContent or sanitize HTML with libraries like DOMPurify.
Context: row.innerHTML = <span class="info-label">${label}</span><span class="info-value">${value}</span>
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/
- https://cwe.mitre.org/data/definitions/79.html
(unsafe-html-content-assignment)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@playground/browser-extension-js/src/popup.ts` around lines 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.
2 participants
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
/clientimport path for usingcreateClerkClient()without React.This deprecates the previous
/backgroundonly import: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 testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Release Notes
New Features
createClerkClientfrom@clerk/chrome-extension/clientfor improved developer experienceDeprecations
createClerkClientfrom@clerk/chrome-extension/backgroundis now deprecated; use the new client export path insteadDocumentation