# 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](https://clerk.com/contact/support).

There are two ways to configure a consistent CRX ID:

1. [For a new extension](#for-a-new-extension).
2. [For an extension uploaded to the Chrome Developer Dashboard](#for-an-extension-uploaded-to-the-chrome-developer-dashboard).

> If you followed the [Chrome Extension Quickstart](https://clerk.com/docs/chrome-extension/getting-started/quickstart.md), you have already completed this configuration.

## For a new extension

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

1. ### Generate your keypairs

   1. Visit Plasmo Itero's [Generate Keypairs](https://itero.plasmo.com/tools/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.
2. ### 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:

   filename: .env.chrome

   ```env
   CRX_PUBLIC_KEY="<PUBLIC KEY>"
   ```
3. ### 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/*"`.

   filename: package.json

   ```json
   {
     // The rest of your package.json file
     "manifest": {
       "key": "$CRX_PUBLIC_KEY",
       "permissions": ["cookies", "storage"],
       "host_permissions": ["http://localhost/*", "$CLERK_FRONTEND_API/*"]
     }
   }
   ```
4. ### 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](#generate-your-keypairs).

## 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.

1. ### Copy the public key

   1. In the [Chrome Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard), select your project.
   2. In the navigation sidenav, 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-----`.
2. ### 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:

   filename: .env.chrome

   ```env
   CRX_PUBLIC_KEY=<YOUR_PUBLIC_KEY>
   ```
3. ### 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/*"`.

   filename: package.json

   ```json
   {
     // The rest of your package.json file
     "manifest": {
       "key": "$CRX_PUBLIC_KEY",
       "permissions": ["cookies", "storage"],
       "host_permissions": ["http://localhost/*", "$CLERK_FRONTEND_API/*"]
     }
   }
   ```
4. ### 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.

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)