{"id":20458647,"url":"https://github.com/mahdita97/machex","last_synced_at":"2026-04-06T01:32:36.054Z","repository":{"id":104042592,"uuid":"485679830","full_name":"MahdiTa97/machex","owner":"MahdiTa97","description":"Machex (A React Chrome Extension Boilerplate)","archived":false,"fork":false,"pushed_at":"2022-04-27T10:08:16.000Z","size":293,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-03T12:25:38.694Z","etag":null,"topics":["chrome","chrome-extension","chrome-extensions","manifest","manifest-v3","manifestv3","postcss","postcss-loader","prettier","react","react-hot-loader","reactjs","tailwindcss","tailwindcss-v3","ts","tslint","typescript","webpack","webpack-dev-server","webpack5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MahdiTa97.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":"2022-04-26T07:31:19.000Z","updated_at":"2025-03-23T22:10:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"cd237ea4-d691-4ece-b253-64e25e8fc389","html_url":"https://github.com/MahdiTa97/machex","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/MahdiTa97/machex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahdiTa97%2Fmachex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahdiTa97%2Fmachex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahdiTa97%2Fmachex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahdiTa97%2Fmachex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MahdiTa97","download_url":"https://codeload.github.com/MahdiTa97/machex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahdiTa97%2Fmachex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31456655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"ssl_error","status_checked_at":"2026-04-05T21:22:51.943Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["chrome","chrome-extension","chrome-extensions","manifest","manifest-v3","manifestv3","postcss","postcss-loader","prettier","react","react-hot-loader","reactjs","tailwindcss","tailwindcss-v3","ts","tslint","typescript","webpack","webpack-dev-server","webpack5"],"created_at":"2024-11-15T12:13:20.482Z","updated_at":"2026-04-06T01:32:36.039Z","avatar_url":"https://github.com/MahdiTa97.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"250px\" src=\"./logo.png\" alt=\"Pomodoros Logo\" /\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eMACHEX (A React Chrome Extension Boilerplate)\u003c/h3\u003e\n\n## Features\n\n- [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)\n- [React 18](https://reactjs.org)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Webpack 5](https://webpack.js.org/)\n- [Webpack Dev Server 4](https://webpack.js.org/configuration/dev-server/)\n- [React Hot Loader](https://github.com/gaearon/react-hot-loader)\n- [Tailwind V3](https://tailwindcss.com/)\n- [eslint-config-react-app](https://www.npmjs.com/package/eslint-config-react-app)\n- [Prettier](https://prettier.io/)\n- [Webpack-Automatic-Refresh](https://webpack.github.io/docs/webpack-dev-server.html#automatic-refresh)\n\n## Getting Started\n\n1. `git clone https://github.com/MahdiTa97/machex.git`\n2. `cd machex`\n3. `npm install`\n4. `npm run start`\n5. open the `chrome://extensions` URL and turn on developer mode from the top left and then click; on `Load Unpacked` and select the `build` folder.\n\n## Scripts\n\n- `start`\n- `build`\n- `prettier`\n\n## Publishing\n\nAfter the development of your extension run the command\n\n```\n$ NODE_ENV=production npm run build\n```\n\nNow, the content of the `build` folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the [official guide](https://developer.chrome.com/webstore/publish) for more info about publishing.\n\n## TypeScript\n\nThe `Options` Page is implemented using TypeScript. Refer to `src/pages/Options/' for examples of how to do this.\n\n## Content Scripts\n\nAlthough this boilerplate uses the Webpack dev server, it's also prepared to write all your bundles files on the disk at every code change, so you can point, on your extension manifest, to the bundles that you want to use as [content scripts](https://developer.chrome.com/extensions/content_scripts), but you need to exclude these entry points from hot reloading [(why?)](https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate/issues/4#issuecomment-261788690). To do so you need to expose which entry points are content scripts on the `webpack.config.js` using the `chromeExtensionBoilerplate -\u003e notHotReload` config. Look at the example below.\n\nLet's say that you want to use the `myContentScript` entry point as the content script, so on your `webpack.config.js` you will configure the entry point and exclude it from hot reloadings, like this:\n\n```js\n{\n  …\n  entry: {\n    myContentScript: \"./src/js/myContentScript.js\"\n  },\n  chromeExtensionBoilerplate: {\n    notHotReload: [\"myContentScript\"]\n  }\n  …\n}\n```\n\nand on your `src/manifest.json`:\n\n```json\n{\n  \"content_scripts\": [\n    {\n      \"matches\": [\"https://www.google.com/*\"],\n      \"js\": [\"myContentScript.bundle.js\"]\n    }\n  ]\n}\n```\n\n## Secrets\n\nIf you develop an extension that talks to some APIs, you probably use different keys for testing and production. It is a good practice to avoid committing your secret keys and expose them to anyone with access to the repository.\n\nTo this task, this boilerplate imports the file `./secrets.\u003cTHE-NODE_ENV\u003e.js` on your modules through the module named `secrets`, so you can do things like this:\n\n_./secrets.development.js_\n\n```js\nexport default { key: '123' };\n```\n\n_./src/popup.js_\n\n```js\nimport secrets from 'secrets';\nApiCall({ key: secrets.key });\n```\n\nFiles named `secret\". *. js` have already been ignored in the repository.\n\n## Credits\n- It is largely derived from [lxieyang/chrome-extension-boilerplate-react] which itself is adapted from [samuelsimoes/chrome-extension-webpack-boilerplate](https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahdita97%2Fmachex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahdita97%2Fmachex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahdita97%2Fmachex/lists"}