{"id":23070587,"url":"https://github.com/sametcodes/crx-base","last_synced_at":"2025-08-15T13:33:10.526Z","repository":{"id":240243443,"uuid":"710721338","full_name":"sametcodes/crx-base","owner":"sametcodes","description":"A codebase for building Chrome Extensions with React, TypeScript and shadcn/ui.","archived":false,"fork":false,"pushed_at":"2024-06-10T14:19:30.000Z","size":196,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T22:33:06.551Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sametcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-27T09:46:33.000Z","updated_at":"2024-07-02T10:46:45.000Z","dependencies_parsed_at":"2024-06-10T16:15:47.187Z","dependency_job_id":"51ab2808-5040-4380-863d-4ccfd00c790e","html_url":"https://github.com/sametcodes/crx-base","commit_stats":null,"previous_names":["sametcodes/crx-base"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sametcodes/crx-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fcrx-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fcrx-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fcrx-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fcrx-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sametcodes","download_url":"https://codeload.github.com/sametcodes/crx-base/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fcrx-base/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270578386,"owners_count":24610036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2024-12-16T06:27:15.517Z","updated_at":"2025-08-15T13:33:10.212Z","avatar_url":"https://github.com/sametcodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# crx-base\n\nBuild browser extensions in a modern way. No more vanilla JS, no more Webpack.\n\n![alt text](assets/example.jpg)\n\n- React, TypeScript\n- [Rollup](https://github.com/rollup/rollup) with [some plugins](/rollup.config.js)\n- [shadcn/ui](https://ui.shadcn.com/) components, including TailwindCSS\n\n## Purpose\n\nThe purpose of this code base is to serve as a template for building browser extensions with React. It is not a boilerplate, but rather a starting point for your own project. The main goal is to provide a modern development environment without the need to configure Webpack or Babel. It uses Rollup to bundle the code and shadcn/ui for the UI components.\n\nThis codebase offers the key feature of using TailwindCSS and shadcn/ui components. It allows you to inject your content script into any document without having to worry about styling conflicts, thanks to [postcss-scope](https://github.com/jackall3n/postcss-scope).\n\n## Getting started\n\nBrowser extensions may require different setups depending on the functionality it is intended to implement. The following steps will guide you through the setup process for building your extension in the desired way.\n\n### Injecting components into a webpage\n\n`crx-base` provides `onElementLoaded` and `onElementLoadedAsync` functions to inject components into a webpage when a specific element is loaded.\n\n```typescript\nimport { onElementLoaded } from '@/lib/crx-base';\nimport RootContext from '@/lib/crx-base/context'\n\nonElementLoaded('#waiting_element_selector', (element) =\u003e {\n    const container = document.createElement('div');\n    container.classList.add('root_extension');\n\n    element.appendChild(container);\n\n    createRoot(container).render(\n        \u003cRootContext value={{ container }}\u003e\n            \u003cApp /\u003e\n        \u003c/RootContext\u003e\n    );\n})\n```\n\n#### Handling containers\n\n`crx-base` provides `useContainer` hook to access the container element in your components. This is useful when you use components that require a container to be rendered such as `Dialog`. Hovewer, `shadcn/ui` components do not provide a container by default so you need to pass it manually.\n\nFor instance, if you want to use `AlertDialog` component, you need to pass the container to the `AlertDialogPortal` component.\n\n```typescript\nconst AlertDialogContent = React.forwardRef\u003c\n  React.ElementRef\u003ctypeof AlertDialogPrimitive.Content\u003e,\n  React.ComponentPropsWithoutRef\u003ctypeof AlertDialogPrimitive.Content\u003e\n\u003e(({ className, ...props }, ref) =\u003e {\n  const { container } = useContainer();\n  return (\n    \u003cAlertDialogPortal container={container}\u003e\n      \u003cAlertDialogOverlay /\u003e\n      \u003cAlertDialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          \"...\",\n          className\n        )}\n        {...props}\n      /\u003e\n    \u003c/AlertDialogPortal\u003e\n  )\n})\n```\n\n\n### Using background scripts\n\n`crx-base` provides `createBackground` function to create a background script. Background scripts are used to run long-running tasks, such as listening for events or managing state.\n\nYou can edit the background script in `src/background/listeners/index.ts`.\n\n```typescript\nfunction handleListener\u003cT\u003e(\n    request: T,\n    sender: chrome.runtime.MessageSender,\n    sendResponse: (message: T) =\u003e void\n) {\n    (async () =\u003e {\n        // handle requests with async/await here\n    })();\n\n    // this is required to make the listener async\n    return true;\n}\n\nchrome.runtime.onMessageExternal.addListener(handleListener);\nchrome.runtime.onMessage.addListener(handleListener);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametcodes%2Fcrx-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsametcodes%2Fcrx-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametcodes%2Fcrx-base/lists"}