This is a starter kit for building a Chrome extension using React and TypeScript. It uses Webpack for bundling and can be used as a starting point for building your own Chrome extension.
- Create a new repository using this template
- Run
yarn install
to install dependencies - Run
yarn build
to build the extension - Open Chrome and navigate to
chrome://extensions
- Enable developer mode
- Click "Load unpacked" and select the
dist
folder in the project directory - The extension should now be loaded and visible in Chrome
Run yarn start
to start a Webpack watch process. This will automatically rebuild the extension when changes are made. You can then load the extension in Chrome as described above.
src
: Contains the source code for the extensionsrc/background
: Contains the source code for the background scriptsrc/contentScript
: Contains the source code for the content scriptsrc/popup
: Contains the source code for the popupsrc/static
: Contains static assets(manifest.json
and images) that will be copied to thedist
folder
Remember to change the name
and description
fields in src/static/manifest.json
to match your extension.
Also in webpack.common.js
change the title
field in the getHTMLPlugins
function to match your extension.