āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/development/deployment/chrome-extension ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
[!WARNING] This guide assumes you are using the Plasmo framework. If you need help applying these concepts to another framework, contact support.
For Clerk production instances, there must be a domain associated with the instance. Even though there may not be a web application associated with your Chrome Extension, a domain is still required. Follow the guide on deploying your Clerk app to production.
.env.production fileThe final result should resemble the following: </SignedOut>
PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}}
CLERK_FRONTEND_API={{fapi_url}}
PLASMO_PUBLIC_CLERK_SYNC_HOST=https://your-domain.com
host_permissionshost_permissions specifies which hosts, or websites, will have permission to sync auth state with your app. It accepts an array, allowing you to add more than one host. You must add your production domain to the host_permissions array.
[!WARNING] If you are using the Sync Host feature and followed the configuration guide, then you have already completed this step (the
http://$PLASMO_PUBLIC_CLERK_SYNC_HOST/*value points to your production domain.)
In the package.json file, in the manifest object, update the host_permissions array. Add your domain and ensure it is preceded with https://. For example, https://clerk.com. Only add the root domain and not any subdomains. Then, add /* to the end of the domain.
The following example shows how to configure host_permissions for production:
{
// The rest of your package.json file
"manifest": {
"key": "$CRX_PUBLIC_KEY",
"permissions": ["cookies", "storage"],
"host_permissions": ["https://<your-domain>/*", "$CLERK_FRONTEND_API/*"]
}
}
allowed_origins<SignedIn> In your terminal, paste the following command and replace the `<CHROME_EXTENSION_KEY>` with your extension's ID. </SignedIn> <SignedOut> 1. At the top of the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected. 1. In the navigation sidenav, select [**API keys**](https://dashboard.clerk.com/~/api-keys). 1. Copy your Secret Key. It should begin with `sk_live_`. 1. In your terminal, paste the following command. Replace `YOUR_SECRET_KEY` with your Clerk Secret Key and the `<CHROME_EXTENSION_KEY>` with your extension's ID.[!WARNING] You may have already added the Extension ID to your web app's
allowed_originsusing your development Secret Key. You must repeat this step using your production Secret Key.
The final result should resemble the following: </SignedOut>
curl -X PATCH https://api.clerk.com/v1/instance \
-H "Authorization: Bearer {{secret}}" \
-H "Content-type: application/json" \
-d '{"allowed_origins": ["chrome-extension://<CHROME_EXTENSION_KEY>"]}'
build/chrome-mv3-dev folder.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā