\n\n[](https://clerk.com/discord)\n[](https://clerk.com/docs?utm_source=github&utm_medium=clerk_chrome_extension)\n[](https://twitter.com/intent/follow?screen_name=ClerkDev)\n\n[Changelog](https://github.com/clerk/javascript/blob/main/packages/chrome-extension/CHANGELOG.md)\n·\n[Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)\n·\n[Request a Feature](https://feedback.clerk.com/roadmap)\n·\n[Ask a Question](https://github.com/clerk/javascript/discussions)\n\n
\n\n---\n\n## Overview\n\n[Clerk](https://clerk.com?utm_source=github&utm_medium=clerk_chrome_extension) is the easiest way to add authentication and user management to your chrome extension. To gain a better understanding of the Clerk React SDK and [Frontend API](https://reference.clerk.com/reference/frontend-api-reference), refer to\nthe Node SDK and Backend API documentation.\n\n## Getting Started\n\nTo use this package you should first create a Clerk application and retrieve a `Publishable Key` for you application to be used as environment variables `VITE_CLERK_PUBLISHABLE_KEY`.\n\n### Prerequisites\n\n- Node.js `>=18.17.0` or later\n\n### Installation\n\n```shell\nnpm install @clerk/chrome-extension\n```\n\n## Usage\n\nStandalone usage snippet:\n\n```tsx\n// App.tsx\nimport { SignedIn, SignedOut, SignIn, SignUp, ClerkProvider } from '@clerk/chrome-extension';\nimport { useNavigate, Routes, Route, MemoryRouter } from 'react-router-dom';\n\nfunction HelloUser() {\n return
Hello user
;\n}\n\nconst publishableKey = process.env.VITE_CLERK_PUBLISHABLE_KEY || '';\n\nfunction ClerkProviderWithRoutes() {\n const navigate = useNavigate();\n\n return (\n navigate(to)}\n routerReplace={to => navigate(to, { replace: true })}\n >\n \n }\n />\n \n \n \n \n \n \n \n \n }\n />\n \n \n );\n}\n\nfunction App() {\n return (\n \n \n \n );\n}\n\nexport default App;\n```\n\nWebSSO usage snippet:\n\n```tsx\n// App.tsx\n// use same code with the above & add the syncSessionWithTab prop in \n\n// ...\n navigate(to)}\n routerReplace={to => navigate(to, { replace: true })}\n syncSessionWithTab\n>\n {/* ... */}\n\n// ...\n```\n\nExamples of a chrome extension using the `@clerk/chrome-extension` package for authentication\ncan be found in our `clerk-chrome-extension-starter` github repository.\nThe 2 supported cases (links to different branches of the same repository):\n\n- [Standalone](https://github.com/clerk/clerk-chrome-extension-starter/tree/main): The extension is using its own authentication\n- [WebSSO](https://github.com/clerk/clerk-chrome-extension-starter/tree/webapp_sso): The extensions shares authentication with a website in the same browser\n\n## WebSSO required settings\n\n### Extension Manifest (`manifest.json`)\n\n#### Permissions\n\nYou must enable the following permissions in your `manifest.json` file:\n\n```\n\"permissions\": [\"cookies\", \"storage\"]\n```\n\n- For more info on the \"cookies\" permission: (Google Developer Cookies Reference)[https://developer.chrome.com/docs/extensions/reference/cookies/]\n- For more info on the \"storage\" permission: (Google Developer Storage Reference)[https://developer.chrome.com/docs/extensions/reference/storage/]\n\n#### Host Permissions\n\nYou must enable the following host permissions in your `manifest.json` file:\n\n- **Development:** `\"host_permissions\": [\"http://localhost\"]`\n - If you're using a domain other than `localhost`, you'll want replace that entry with your domain: `http://`\n- **Production:** `\"host_permissions\": [\"https:///\"]`\n - Your Frontend API URL can be found in `Clerk Dashboard > API Keys > Advanced > Clerk API URLs`.\n\nFor more info on host permissions: (Google Developer `host_permissions` Reference)[https://developer.chrome.com/docs/extensions/mv3/declare_permissions/#host-permissions]\n\n\n\n### Clerk Settings\n\nAdd your Chrome extension origin to your instance allowed_origins using BAPI:\n\n```bash\ncurl -X PATCH https://api.clerk.com/v1/instance \\\n -H \"Authorization: Bearer sk_secret_key\" \\\n -H \"Content-type: application/json\" \\\n -d '{\"allowed_origins\": [\"chrome-extension://extension_id_goes_here\"]}'\n```\n\n## Deploy to Production\n\nSetting the `allowed_origins` (check [Clerk Settings](#clerk-settings)) is **REQUIRED** for both **Development** and **Production** instances when using the WebSSO use case.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n## Support\n\nYou can get in touch with us in any of the following ways:\n\n- Join our official community [Discord server](https://clerk.com/discord)\n- Create a [GitHub Discussion](https://github.com/clerk/javascript/discussions)\n- Contact options listed on [our Support page](https://clerk.com/support?utm_source=github&utm_medium=clerk_chrome_extension)\n\n## Contributing\n\nWe're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md).\n\n## Security\n\n`@clerk/chrome-extension` follows good practices of security, but 100% security cannot be assured.\n\n`@clerk/chrome-extension` is provided **\"as is\"** without any **warranty**. Use at your own risk.\n\n_For more information and to report security issues, please refer to our [security documentation](https://github.com/clerk/javascript/blob/main/docs/SECURITY.md)._\n\n## License\n\nThis project is licensed under the **MIT license**.\n\nSee [LICENSE](https://github.com/clerk/javascript/blob/main/packages/chrome-extension/LICENSE) for more information.\n","readmeFilename":"README.md"}
![](\"https://images.clerk.com/static/logo-dark-mode-400x400.png\"){kind=logo}
\n