āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/development/configure-consistent-crx-id ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Chrome Extensions have a unique CRX ID that rotates by default, which can cause errors with the Clerk integration. This guide demonstrates how to configure a consistent CRX ID so that your extension will have a stable, unchanging key. This guide assumes you are using the Plasmo framework. If you need help applying these concepts to another framework, contact support.
There are two ways to configure a consistent CRX ID:
[!WARNING] If you followed the Chrome Extension Quickstart, you have already completed this configuration.
To configure a consistent CRX ID for a new extension, follow these steps:
<Steps> ### Generate your keypairs.env.chrome file to store your public keyCreate an .env.chrome file and add your public key to it, as shown in the following example:
CRX_PUBLIC_KEY="<PUBLIC KEY>"
package.json to use the new public keyPlasmo uses the package.json to generate a manifest.json on build, and allows for the use of environment variables in package.json.
In your package.json, in the manifest object:
"key": "$CRX_PUBLIC_KEY".permissions array to include "cookies" and "storage".host_permissions array to include "http://localhost/*" and "$CLERK_FRONTEND_API/*".{
// The rest of your package.json file
"manifest": {
"key": "$CRX_PUBLIC_KEY",
"permissions": ["cookies", "storage"],
"host_permissions": ["http://localhost/*", "$CLERK_FRONTEND_API/*"]
}
}
pnpm dev.chrome://extensions.build/chrome-mv3-dev folder. Then select Select. Your extension will now be loaded and shown in the list of extensions.If you have already uploaded a version of your extension to the Chrome Developer Dashboard, follow these steps to configure your extension.
<Steps> ### Copy the public key-----BEGIN PUBLIC KEY----- and -----END PUBLIC KEY-----..env.chrome file to store your public keyCreate an .env.chrome file and add your public key to it, as shown in the following example:
CRX_PUBLIC_KEY=<YOUR_PUBLIC_KEY>
package.json to use the new public keyPlasmo uses the package.json to generate a manifest.json on build, and allows for the use of environment variables in package.json.
In your package.json, in the manifest object:
"key": "$CRX_PUBLIC_KEY".permissions array to include "cookies" and "storage".host_permissions array to include "http://localhost/*" and "$CLERK_FRONTEND_API/*".{
// The rest of your package.json file
"manifest": {
"key": "$CRX_PUBLIC_KEY",
"permissions": ["cookies", "storage"],
"host_permissions": ["http://localhost/*", "$CLERK_FRONTEND_API/*"]
}
}
Verify that your extension has a consistent CRX ID by following these steps:
chrome://extensions.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā