Docs

Configure a consistent CRX ID for your Chrome Extension

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:

  1. For a new extension.
  2. For an extension uploaded to the Chrome Developer Dashboard.

Warning

If you followed the Chrome Extension Quickstart, you have already completed this configuration.

For a new extension

To configure a consistent CRX ID for a new extension, follow these steps:

Generate your keypairs

  1. Visit Plasmo Itero's Generate Keypairs tool.
  2. Select Generate KeyPairs.
  3. Save the Private Key somewhere secure in case you need it in the future. Save the Public Key and the CRX ID for the next steps.

Create an .env.chrome file to store your public key

Create an .env.chrome file and add your public key to it, as shown in the following example:

.env.chrome
CRX_PUBLIC_KEY="<PUBLIC KEY>"

Edit your package.json to use the new public key

Plasmo 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:

  • Add "key": "$CRX_PUBLIC_KEY".
  • Set the permissions array to include "cookies" and "storage".
  • Set/update the host_permissions array to include "http://localhost/*" and "$CLERK_FRONTEND_API/*".
package.json
{
  // The rest of your package.json file
  "manifest": {
    "key": "$CRX_PUBLIC_KEY",
    "permissions": ["cookies", "storage"],
    "host_permissions": ["http://localhost/*", "$CLERK_FRONTEND_API/*"]
  }
}

Verify the CRX ID

  1. Ensure that the development build is updated by running pnpm dev.
  2. Open Chrome or a Chromium-based browser and navigate to chrome://extensions.
  3. Remove and re-install the extension. To re-install, in the top-left, select Load unpacked. Navigate to where your project is located and select the build/chrome-mv3-dev folder. Then select Select. Your extension will now be loaded and shown in the list of extensions.
  4. Confirm that the ID shown in your extension matches the CRX ID you saved earlier.

For an extension uploaded to the Chrome Developer Dashboard

If you have already uploaded a version of your extension to the Chrome Developer Dashboard, follow these steps to configure your extension.

Copy the public key

  1. In the Chrome Developer Dashboard, select your project.
  2. In the navigation sidebar, select Package.
  3. Select View public key. A modal will open with your public key.
  4. Copy the string between -----BEGIN PUBLIC KEY----- and -----END PUBLIC KEY-----.

Create an .env.chrome file to store your public key

Create an .env.chrome file and add your public key to it, as shown in the following example:

.env.chrome
CRX_PUBLIC_KEY=<YOUR_PUBLIC_KEY>

Edit your package.json to use the new public key

Plasmo 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:

  • Add "key": "$CRX_PUBLIC_KEY".
  • Set the permissions array to include "cookies" and "storage".
  • Set/update the host_permissions array to include "http://localhost/*" and "$CLERK_FRONTEND_API/*".
package.json
{
  // The rest of your package.json file
  "manifest": {
    "key": "$CRX_PUBLIC_KEY",
    "permissions": ["cookies", "storage"],
    "host_permissions": ["http://localhost/*", "$CLERK_FRONTEND_API/*"]
  }
}

Validate the Extension ID

Verify that your extension has a consistent CRX ID by following these steps:

  1. At the top-left of the Chrome Developer Dashboard, your extension ID will be displayed below the name of your extension.
  2. In a separate tab, open Chrome or a Chromium-based browser and navigate to chrome://extensions.
  3. Locate your extension in the list of extensions. Confirm that the ID shown in your extension matches the ID displayed in the Chrome Developer Dashboard.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on