Deploy a Chrome Extension to production
Create a production instance
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.
Update your .env.production file
Add your Publishable and Frontend API keys for your Clerk production instance to your .env.production file. These keys can always be retrieved from the API keys page in the Clerk Dashboard. If you're using the Sync Host feature, you also need to set the PLASMO_PUBLIC_CLERK_SYNC_HOST environment variable. The value is the domain your web app's production server runs on. For example, https://clerk.com.
- At the top in the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected.
- In the navigation sidebar, select API keys.
- In the Quick Copy section, select Chrome Extension and copy your Clerk Publishable and Frontend API keys.
- Paste your keys into your
.env.productionfile. - If you are using the Sync Host feature, you will also need to set the
PLASMO_PUBLIC_CLERK_SYNC_HOSTenvironment variable. The value should be the domain your web app's production server runs on. For example,https://clerk.com.
The final result should resemble the following:
PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_FRONTEND_API=YOUR_FRONTEND_API_URL
PLASMO_PUBLIC_CLERK_SYNC_HOST=https://yourdomain.comAdd production domain to host_permissions
host_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.
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://<yourdomain>/*", "$CLERK_FRONTEND_API/*"]
}
}In your terminal, paste the following command and replace the <CHROME_EXTENSION_KEY> with your extension's ID.
- At the top in the Clerk Dashboard, in the instance selection dropdown, ensure that your production instance is selected.
- In the navigation sidebar, select API keys.
- Copy your Secret Key. It should begin with
sk_live_. - In your terminal, paste the following command. Replace
YOUR_SECRET_KEYwith your Clerk Secret Key and the<CHROME_EXTENSION_KEY>with your extension's ID.
The final result should resemble the following:
curl -X PATCH https://api.clerk.com/v1/instance \
-H "Authorization: Bearer YOUR_SECRET_KEY" \
-H "Content-type: application/json" \
-d '{"allowed_origins": ["chrome-extension://<CHROME_EXTENSION_KEY>"]}'Submit your extension for review
- In your app, create a new zip of the
build/chrome-mv3-devfolder. - In the top-right of the Chrome Web Store Developer Dashboard, select Upload new package and upload the zip file.
- Complete the required information to submit your extension for review. To check the requirements that must be met before submitting, select Why can't I submit?.
Feedback
Last updated on