{"id":25035092,"url":"https://github.com/liinkiing/react-extension-webpack-typescript-starter","last_synced_at":"2025-10-17T03:07:06.152Z","repository":{"id":47936589,"uuid":"223777428","full_name":"Liinkiing/react-extension-webpack-typescript-starter","owner":"Liinkiing","description":"A web browser extension starter based on Typescript, React and Webpack made to kickstart your next extension.","archived":false,"fork":false,"pushed_at":"2021-08-11T17:43:09.000Z","size":1984,"stargazers_count":7,"open_issues_count":12,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-20T10:42:04.185Z","etag":null,"topics":["boilerplate","chrome-extension","extension","react","starter","template","typescript","webpack"],"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/Liinkiing.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}},"created_at":"2019-11-24T16:49:24.000Z","updated_at":"2021-09-02T09:44:57.000Z","dependencies_parsed_at":"2022-08-12T14:40:29.733Z","dependency_job_id":null,"html_url":"https://github.com/Liinkiing/react-extension-webpack-typescript-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Liinkiing/react-extension-webpack-typescript-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liinkiing%2Freact-extension-webpack-typescript-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liinkiing%2Freact-extension-webpack-typescript-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liinkiing%2Freact-extension-webpack-typescript-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liinkiing%2Freact-extension-webpack-typescript-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Liinkiing","download_url":"https://codeload.github.com/Liinkiing/react-extension-webpack-typescript-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Liinkiing%2Freact-extension-webpack-typescript-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279275290,"owners_count":26138567,"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-10-17T02:00:07.504Z","response_time":56,"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":["boilerplate","chrome-extension","extension","react","starter","template","typescript","webpack"],"created_at":"2025-02-05T23:45:03.016Z","updated_at":"2025-10-17T03:07:06.116Z","avatar_url":"https://github.com/Liinkiing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Logo](src/assets/icon-48.png?raw=true \"Logo\") React Chrome Extension starter\nA simple starter to bootstrap your next chrome extension.\n\n## Usage\n\n```bash\n$ yarn \n# install dependencies\n\n$ yarn dev\n# launch files compilation in watch mode and an instance of React Devtool\n\n$ yarn build\n# build production-ready files into a 'build' folder \n```\n\n### In Chrome web browser\n1. Go to: [**chrome://extensions**](chrome://extensions)\n2. Toggle: \"**developer mode**\" on\n3. Click on: \"**Load unpacked**\"\n4. Select the newly created folder \"**build**\" from the project folder\n\n### In Firefox web browser\n1. Go to: [**about:debugging**](about:debugging)\n2. Select: \"**Enable add-on debugging**\"\n3. Click on: \"**Load Temporary Add-on…**\"\n4. Open the newly created folder \"**build**\" from the project folder, and choose the \"**manifest.json**\" file\n\n## React DevTools\nBy default, using React Devtools within a Chrome extension can be a tedious \ntask. This template include, by default, support for it. It uses\nthe standalone [react-devtool package](https://www.npmjs.com/package/react-devtools).\nWhen you edit your React code in the `popup` folder, files are updated and you \nmust **re-open your popup extension** to see changes. When the popup is opened,\n**React DevTools** window will show your React tree.\n\n## Styled component\nThe template comes with [styled-components](https://github.com/styled-components/styled-components). \nAgain, you can wether choose to not use it, this is a personnal choice. \nYou can also find a `src/popup/styles` folder, which contains many related \nstyled-components files to keep things organized. It's again a personnal convention \nthat I follow, feel free to anhilate this directory if you want 😢 \n\n## WebpackExtensionReloader\n[webpack-extension-reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) is used \nso any changes you made to your code (mainly the `background` and `contentscript` related codes) \nmake your extensions to be reloaded by the browser, so it understands your new \nchanges in those files.\n\n## Aliases\nIt includes by default support for aliases in `tsconfig.json`.\nThey are 5 defaulted aliases, ready to use : \n```typescript\n// ~contentscript refers to src/contentscript\nimport { something } from '~contentscript/file'\n\n// ~popup refers to src/popup\nimport { something } from '~popup/file'\n\n// ~styles refers to src/popup/styles\nimport { something } from '~styles/file'\n\n// ~background refers to src/background\nimport { something } from '~background/file'\n\n// ~ refers to src\nimport { something } from '~/file'\n```\n\nIt uses [tsconfig-paths](https://github.com/dividab/tsconfig-paths) and it's corresponding Webpack plugin, [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin). \nIt means that you only have to setup your aliases in the `tsconfig.json`, it's your source of truth. \n\n## @types and extending modules\nIt also includes a `@types` directory under **src**, so you can easily \nseparate your types or extends some external modules. They are also included in the `tsconfig.json`\nFor example, if some package named `foo` does not have any types in [DefinitelyTyped](https://definitelytyped.org/), you could \nadd a `index.d.ts` under `src/@types/foo/index.d.ts`. It is just my personnal convention, so do as you want!\n\n```typescript\n// src/@types/foo/index.d.ts\n\n// to make sure Typescript get the original types from the module (if any)\nimport * as foo from 'foo'\n\ndeclare module 'foo' {\n  declare function foo(bar: string): boolean\n} \n```\n\nBecause the `@types` directory is declared in `typeRoots`, Typescript will no longer complain if you imported your package with missing types\n\n## Tooling\nThe template includes [Prettier](https://prettier.io/), [ESLint](https://eslint.org/) (with [Typescript-eslint](https://github.com/typescript-eslint/typescript-eslint)), [Babel](https://babeljs.io/) and [Husky](https://github.com/typicode/husky).\nAll their related configurations are in the `*rc` files.\n\n## Troubleshooting\nWhen you open for the first time the popup extension and you see nothing, \ninspect the popup extension (right click to the extension icon \u003e Inspect popup)\n\nIf you see an error like this on your console\n![error](https://miro.medium.com/max/1625/1*XOZ-S9jMg84f1Dmf5hwB5Q.png)\nIt's because of a **C**ontent **S**ecurity **P**olicy. \nBy default, Chrome blocks inline scripts in extension, so the React \napp may not work. To make it works, copy the hash that the error gave you\nand paste it in the `manifest.json` file, in the `content_security_policy` like this\n```json\n{\n  ...\n  \"content_security_policy\": \"connect-src 'self' ws://localhost:*; script-src 'self' 'unsafe-eval' '\u003cYOUR_HASH_HERE\u003e'; object-src 'self'\",\n  ... \n}\n```\n\nRebuild the extension and it should works\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliinkiing%2Freact-extension-webpack-typescript-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliinkiing%2Freact-extension-webpack-typescript-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliinkiing%2Freact-extension-webpack-typescript-starter/lists"}