Skip to content

fix(chrome-extension): Enable support for Metamask & OKX; Mark unsupported components #6179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tmilewski merged 4 commits into from
Jun 23, 2025
Merged

fix(chrome-extension): Enable support for Metamask & OKX; Mark unsupported components #6179

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5568490
fix(chrome-extension): Mark unsupported components
tmilewski Jun 23, 2025
1ef53b7
chore: Remove PricingTable from unsupported components
tmilewski Jun 23, 2025
d69bcfc
feat: Enable Metamask & OKX Web3 support
tmilewski Jun 23, 2025
361463f
chore: Update changeset
tmilewski Jun 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/twelve-ducks-refuse.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/chrome-extension': minor
---

Explicitly mark `GoogleOneTap`, `PricingTable`, and `SignInWithMetamaskButton` UI components as deprecated and unsupported (due to the requirement of Remotely Hosted Code) to help avoid confusion.
5 changes: 3 additions & 2 deletions packages/chrome-extension/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
export * from '@clerk/clerk-react';

@panteliselef panteliselef Jun 23, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tmilewski Is it better to simply control what's exported here instead of breaking without realising it ?

@tmilewski tmilewski Jun 23, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, though the plan was to deprecate, then remove in a major.


export type { StorageCache } from './internal/utils/storage';

// The order matters since we want override @clerk/clerk-react ClerkProvider
export { ClerkProvider } from './react';
// The order matters since we want override @clerk/clerk-react components
export { ClerkProvider, GoogleOneTap, PricingTable, SignInWithMetamaskButton } from './react';

// Override Clerk React error thrower to show that errors come from @clerk/chrome-extension
import { setErrorThrowerOptions } from '@clerk/clerk-react/internal';
Expand Down
17 changes: 17 additions & 0 deletions packages/chrome-extension/src/react/NotSupported.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* @deprecated This component is not supported in Browser Extensions due to Chrome's security restrictions around remotely hosted code.
* @see https://clerk.com/docs/references/browser-extensions/browser-security-restrictions
*/
export const PricingTable = () => null;

@panteliselef panteliselef Jun 23, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not include this, as it will be handled in COM-954. We are probably looking at a more fine grain solution here. Also we are missing the UserProfile and OrgProfile billing pages which are also accessing remotely host code, so let's defer all this work to ticket mentioned above.

@tmilewski tmilewski Jun 23, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be great, and I've removed this from the PR. We just need to make sure we hit this as PR is a direct result of people getting caught up by the RHC requirement.


/**
* @deprecated This component is not supported in Browser Extensions due to Chrome's security restrictions around remotely hosted code.
* @see https://clerk.com/docs/references/browser-extensions/browser-security-restrictions
*/
export const SignInWithMetamaskButton = () => null;

@panteliselef panteliselef Jun 23, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we can get around this if needed ! It is caused by a single utility functions that loads the coinbase wallet sdk, which is unrelated to metamask.

@tmilewski tmilewski Jun 23, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Originally, we were targeting pop-ups. Of which, none of the Web3 options worked. Now that we support other variants like side panels, this isn't the case anymore. I've updated to PR to reflect that.


/**
* @deprecated This component is not supported in Browser Extensions due to Chrome's security restrictions around remotely hosted code.
* @see https://clerk.com/docs/references/browser-extensions/browser-security-restrictions
*/
export const GoogleOneTap = () => null;
1 change: 1 addition & 0 deletions packages/chrome-extension/src/react/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { ClerkProvider } from './ClerkProvider';
export { GoogleOneTap, PricingTable, SignInWithMetamaskButton } from './NotSupported';