{"id":14007102,"url":"https://github.com/yosevu/react-content-script","last_synced_at":"2025-07-24T01:30:44.363Z","repository":{"id":23726177,"uuid":"99700079","full_name":"yosevu/react-content-script","owner":"yosevu","description":"An example project to build Chrome extensions using React and TypeScript. Ideal for developers looking to create efficient and modern Chrome extensions with a focus on a clean development workflow using Vite and crxjs.","archived":false,"fork":false,"pushed_at":"2024-08-12T03:16:12.000Z","size":369,"stargazers_count":200,"open_issues_count":0,"forks_count":56,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-08-13T03:55:49.991Z","etag":null,"topics":["chrome-extension","content-script","crxjs","developer-tools","hmr","popup","react","typescript","vite","web-development"],"latest_commit_sha":null,"homepage":"","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/yosevu.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-08T14:10:29.000Z","updated_at":"2024-08-13T03:55:49.992Z","dependencies_parsed_at":"2024-08-10T10:14:10.229Z","dependency_job_id":null,"html_url":"https://github.com/yosevu/react-content-script","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosevu%2Freact-content-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosevu%2Freact-content-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosevu%2Freact-content-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yosevu%2Freact-content-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yosevu","download_url":"https://codeload.github.com/yosevu/react-content-script/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227384118,"owners_count":17772320,"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","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":["chrome-extension","content-script","crxjs","developer-tools","hmr","popup","react","typescript","vite","web-development"],"created_at":"2024-08-10T10:01:49.653Z","updated_at":"2024-11-30T17:31:55.581Z","avatar_url":"https://github.com/yosevu.png","language":"TypeScript","readme":"# React TypeScript Chrome Extension\n\n## Overview\n\nThis project demonstrates how to build a Chrome Extension using React and TypeScript. It includes examples of a Popup and a Content Script React app, both built and bundled with Vite and crxjs.\n\n## Setup\n\n### Clone repository\n```sh\ngit clone git@github.com:yosevu/react-content-script.git\n```\n\n### Install dependencies\n```sh\nyarn\n```\n\n### Development\n\nTo start a development server with hot-reloading:\n\n```sh\nyarn dev\n```\n\n### Build for Production\n\nTo create a production-ready build of the extension:\n\n```sh\nyarn build\n```\n\n### Load the Extension\n\n1. Navigate to [chrome://extensions/](chrome://extensions/)\n2. **Enable** \"Developer mode\" using the toggle switch in the top right corner.\n3. Click the **\"Load unpacked\"** button in the top left corner.\n4. Select the `dist` directory inside the `react-content-script` directory.\n5. Navigate to https://blank.org/ to see the Content Script React app in action.\n6. Open the extensions menu and click on **\"React TypeScript Chrome Extension\"** to see the Popup React app.\n\n## [Popup](https://developer.chrome.com/docs/extensions/mv3/user_interface/#popup)\n\nThe popup source code is at the root directory.\n\n## [Content Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)\n\nThe content script source code is in the `content-script` directory.\n\n\u003cimg width=\"895\" alt=\"Screen Shot 2022-06-18 at 10 04 04 AM\" src=\"https://user-images.githubusercontent.com/16216104/174416528-6e5ad272-5faa-41d4-a717-c210ed4924b0.png\"\u003e\n\n## Development Tips\n\n- **Live Reloading**: Use `yarn dev` to see changes immediately during development.\n- **Debugging**: Use Chrome DevTools to inspect and debug both the content script and popup.\n\n## Background\n\nThis repository was originally part of [How to inject a React app into a Chrome Extension as a Content Script](https://medium.com/@yosevu/how-to-inject-a-react-app-into-a-chrome-extension-as-a-content-script-3a038f611067). \n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosevu%2Freact-content-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyosevu%2Freact-content-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyosevu%2Freact-content-script/lists"}