{"id":13808835,"url":"https://github.com/satendra02/react-chrome-extension","last_synced_at":"2025-05-14T03:31:36.053Z","repository":{"id":39554078,"uuid":"140453542","full_name":"satendra02/react-chrome-extension","owner":"satendra02","description":"chrome extension boilerplate with ReactJs using inject page strategy","archived":false,"fork":false,"pushed_at":"2024-04-08T08:17:57.000Z","size":694,"stargazers_count":636,"open_issues_count":28,"forks_count":131,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-08-04T01:10:04.988Z","etag":null,"topics":["boilerplate","chrome-extension","content-script","iframe","inject-page","javascript","reactjs"],"latest_commit_sha":null,"homepage":"https://medium.com/@satendra02/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39","language":"JavaScript","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/satendra02.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2018-07-10T15:35:30.000Z","updated_at":"2024-08-01T20:30:35.000Z","dependencies_parsed_at":"2024-01-08T07:57:15.376Z","dependency_job_id":"826e3203-9fd2-4c89-93bb-440336138e6b","html_url":"https://github.com/satendra02/react-chrome-extension","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satendra02%2Freact-chrome-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satendra02%2Freact-chrome-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satendra02%2Freact-chrome-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satendra02%2Freact-chrome-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/satendra02","download_url":"https://codeload.github.com/satendra02/react-chrome-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273281,"owners_count":17448076,"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":["boilerplate","chrome-extension","content-script","iframe","inject-page","javascript","reactjs"],"created_at":"2024-08-04T01:01:52.913Z","updated_at":"2024-11-19T00:31:08.414Z","avatar_url":"https://github.com/satendra02.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Chrome Extension\nA chrome extension boilerplate project with ReactJs using inject page strategy. \n\nStop worrying about the configurational challenges of setting up the Chrome extension, just start writing your components as usual. Read [detailed blog](https://medium.com/@satendra02/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39)\n\n\u003eThis project is sponsored By [Recast Studio](https://recast.studio)\n\n\nThe boilerplate is to quickly create a chrome extension using ReactJs, The motivation behind creating a boilerplate was:\n1. Instead of Chrome's ready-made popup, We wanted our page injected into DOM as a sidebar for better UX.\n\n2. We wanted to use ReactJs for the Component-based approach, Routing, and its build mechanism.\n\n3. We need to make sure that the extension CSS does not conflict with the host page styles in any case.\n\n\n## Features\n\n- Used ReactJs to write Chrome extension\n- Injecting extension to host page as a content script\n- Utilized the Chrome messaging API\n- Isolated extension CSS using Iframe\n\n## Installation\n\u003eMake sure you have **NodeJs(\u003e18)** version installed\n\nClone repo\n\n```\ngit clone https://github.com/satendra02/react-chrome-extension.git\n```\nGo to the `react-chrome-extension` directory and run\n\n```\nyarn install\n```\nNow build the extension using\n```\nyarn build\n```\nYou will see a `build` folder generated inside `[PROJECT_HOME]`\n\nTo avoid running `yarn build` after updating any file, you can run\n\n```\nyarn watch\n```\n\nwhich listens to any local file changes, and rebuilds automatically.\n\n## Adding React app extension to Chrome\n\nIn the Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.\n\n\u003cimg src=\"https://cdn-images-1.medium.com/max/1600/1*OaygCwLSwLakyTqCADbmDw.png\" /\u003e\n\nNow click on the `LOAD UNPACKED` and browse to `[PROJECT_HOME]\\build`, This will install the React app as a Chrome extension.\n\nWhen you go to any website and click on the extension icon, the injected page will toggle.\n\n\u003cimg src=\"https://cdn-images-1.medium.com/max/1600/1*bXJYfvrcHDWKwUZCrPI-8w.png\" /\u003e\n\n## Using SASS\n\nBoilerplate contains [sass-loader](https://github.com/webpack-contrib/sass-loader), so you can use SASS instead of pure CSS in your project. To do so:\n1. Rename ```src/App.css``` file to ```src/App.scss``` \n2. Change import line in ```src/app.js``` from \n ```import './App.css';```  to ```import './App.scss';```\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/satendra02/react-chrome-extension/. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n\n## License\n\nThe repo is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatendra02%2Freact-chrome-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsatendra02%2Freact-chrome-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatendra02%2Freact-chrome-extension/lists"}