{"id":46627240,"url":"https://github.com/clerk/clerk-chrome-extension-js-quickstart","last_synced_at":"2026-03-07T23:01:06.605Z","repository":{"id":342119376,"uuid":"1167974836","full_name":"clerk/clerk-chrome-extension-js-quickstart","owner":"clerk","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-04T20:36:46.000Z","size":357,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-05T02:23:49.609Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clerk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-26T22:11:11.000Z","updated_at":"2026-03-02T20:09:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/clerk/clerk-chrome-extension-js-quickstart","commit_stats":null,"previous_names":["clerk/clerk-chrome-extension-js-quickstart"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/clerk/clerk-chrome-extension-js-quickstart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fclerk-chrome-extension-js-quickstart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fclerk-chrome-extension-js-quickstart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fclerk-chrome-extension-js-quickstart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fclerk-chrome-extension-js-quickstart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clerk","download_url":"https://codeload.github.com/clerk/clerk-chrome-extension-js-quickstart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clerk%2Fclerk-chrome-extension-js-quickstart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30236042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-07T23:00:23.510Z","updated_at":"2026-03-07T23:01:06.582Z","avatar_url":"https://github.com/clerk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://clerk.com?utm_source=github\u0026utm_medium=owned\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/light-logo.png\"\u003e\n      \u003cimg alt=\"Clerk Logo for light background\" src=\"./assets/dark-logo.png\" height=\"64\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    Clerk and Chrome Extension Quickstart\n  \u003c/h1\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@clerk/chrome-extension\"\u003e\n    \u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dm/@clerk/chrome-extension\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://discord.com/invite/b5rXHjAg7A\"\u003e\n    \u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/856971667393609759?color=7389D8\u0026label\u0026logo=discord\u0026logoColor=ffffff\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://x.com/clerk\"\u003e\n    \u003cimg alt=\"Follow Clerk on X\" src=\"https://img.shields.io/twitter/url.svg?label=%40clerkdev\u0026style=social\u0026url=https%3A%2F%2Ftwitter.com%2Fclerkdev\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cimg alt=\"Clerk Hero Image\" src=\"./assets/hero.png\"\u003e\n\u003c/div\u003e\n\n## Introduction\n\nClerk is a developer-first authentication and user management solution.It provides pre-built UI components and APIs for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any Chrome Extension application.\n\nThis is a Chrome extension demo using `@clerk/chrome-extension` with plain TypeScript. No Chrome extension frameworks (no WXT, Plasmo, CRXJS, etc.). Uses `pnpm build` (esbuild under the hood) to bundle the TypeScript source.\n\n## Project structure\n\n```\nsrc/\n  popup.ts              # TypeScript source (bundled to build/popup.js)\nbuild/\n  manifest.json         # Chrome extension manifest (Manifest V3)\n  popup.html            # Popup page\n  popup.css             # Popup styles\n  icon*.png             # Icons for Extensions\n  popup.js              # Bundled output (gitignored)\n  popup.js.map          # Source Maps (gitignored)\n.env.example            # Environment variable template\n.env                    # Your publishable key (gitignored)\n```\n\nStatic extension files (`manifest.json`, `popup.html`, `popup.css`) live directly in `build/` and are checked into git. The esbuild config automatically loads `.env`, replaces `process.env.CLERK_PUBLISHABLE_KEY` at build time, and bundles `src/popup.ts` into `build/popup.js`.\n\n\u003e [!IMPORTANT]\n\u003e This setup allows for the simplest example for this quickstart. For developing an extension, moving `manifest.json` and `popup.css` out of `build/` to `src/` or another location and then creating/copying/building these files during `pnpm dev` and `pnpm build` is likely preferred. Please don't take the initial project structure as advice on organizing your project.\n\n## Running the template\n\n```bash\ngit clone https://github.com/clerk/clerk-chrome-extension-js-quickstart\ncd clerk-chrome-extension-js-quickstart\n```\n\nTo run the example locally, you need to:\n\n1. Sign up for a Clerk account at [https://clerk.com](https://dashboard.clerk.com/sign-up?utm_source=readme\\\u0026utm_medium=owned\\\u0026utm_campaign=chrome-extension\\\u0026utm_content=10-24-2023\\\u0026utm_term=clerk-chrome-extension-quickstart).\n\n2. Go to the [Clerk dashboard](https://dashboard.clerk.com?utm_source=readme\\\u0026utm_medium=owned\\\u0026utm_campaign=chrome-extension\\\u0026utm_content=10-24-2023\\\u0026utm_term=clerk-chrome-extension-quickstart) and create an application.\n\n3. Copy [`.env.example`](./.env.example) to `.env` file, then set the required Clerk environment variables.\n\n4. `pnpm install` the required dependencies.\n\n   The first time you install packages you may need to approve builds. Use:\n\n   ```bash\n   pnpm approve-builds\n   ```\n\n   \u003e **Note:** `pnpm approve-builds` is interactive. If you need a non-interactive alternative, add the following to `package.json`. This list may need updating when dependencies change.\n   \u003e\n   \u003e ```json\n   \u003e \"pnpm\": {\n   \u003e   \"onlyBuiltDependencies\": [\n   \u003e     \"@clerk/shared\",\n   \u003e     \"browser-tabs-lock\",\n   \u003e     \"bufferutil\",\n   \u003e     \"core-js\",\n   \u003e     \"esbuild\",\n   \u003e     \"utf-8-validate\"\n   \u003e   ]\n   \u003e }\n   \u003e ```\n\n5. Update `host_permissions` in `build/manifest.json`. Add your Clerk Frontend API domain so the extension can send cookies and authenticate with Clerk. You can get your Frontend API URL from the [API Keys](https://dashboard.clerk.com/~/api-keys) section of the [Clerk Dashboard](https://dashboard.clerk.com/).\n\n   ```json\n   \"host_permissions\": [\n     \"http://localhost/*\",\n     \"https://your-app-42.clerk.accounts.dev/*\"\n   ]\n   ```\n\n6. `pnpm dev` to start the file watcher.\n\n7. Load the extension in Chrome:\n   1. Open `chrome://extensions/`\n   2. Enable **Developer mode** (top right)\n   3. Click **Load unpacked**\n   4. Select the `build/` directory inside this project\n\n## Learn more\n\nTo learn more about Clerk and Chrome Extensions, check out the following resources:\n\n* [Quickstart: Get started with JS Chrome Extension and Clerk](https://clerk.com/docs/getting-started/quickstart/chrome-extension-js?utm_source=readme\\\u0026utm_medium=owned\\\u0026utm_campaign=chrome-extension\\\u0026utm_content=10-24-2023\\\u0026utm_term=clerk-chrome-extension-quickstart)\n* [Clerk Documentation](https://clerk.com/docs?utm_source=readme\\\u0026utm_medium=owned\\\u0026utm_campaign=chrome-extension\\\u0026utm_content=10-24-2023\\\u0026utm_term=clerk-chrome-extension-quickstart)\n* [Chrome Extensions](https://developer.chrome.com/docs/extensions)\n\n## Found an issue or want to leave feedback\n\nFeel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.\n\n## Connect with us\n\nYou can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).\n\nIf you prefer, you can also find support through our [X account](https://x.com/clerk), or you can [email](mailto:support@clerk.dev) us!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclerk%2Fclerk-chrome-extension-js-quickstart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclerk%2Fclerk-chrome-extension-js-quickstart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclerk%2Fclerk-chrome-extension-js-quickstart/lists"}