Boilerplate for building Chrome Extensions in React and TypeScript using a simple Webpack build process.
npx chrome-ext-react my-ext
cd my-ext
- Edit name and description in
package.json
andmanifest.json
-
npm i
to install dependancies -
npm start
to build in watch mode
- Open Chrome and navigate to
chrome://extensions/
- Toggle on
Developer mode
in the top right corner - Click
Load unpacked
- Select the entire
dist
folder
-
npm run build
to generate a minimized production build in thedist
folder - ZIP the entire
dist
folder (e.g.dist.zip
) - Publish the ZIP file on the Chrome Web Store Developer Dashboard!
-
git init
to start a new git repo for tracking your changes, do an initial base commit with all the default files - Update
package.json
, important fields includeauthor
,version
,name
anddescription
- Update
manifest.json
, important fields includeversion
,name
anddescription
- Update
webpack.commmon.js
, the title in thegetHtmlPlugins
function should be your extension name
- Folders get flattened, static references to images from HTML do not need to be relative (i.e.
icon.png
instead of../static/icon.png
) - Importing local ts/tsx/css files should be relative, since Webpack will build a dependancy graph using these paths
- Update the manifest file as per usual for chrome related permissions, references to files in here should also be flattened and not be relative