React Chrome Extension Boilerplate
npm i
to install dependancies
npm start
to start running the fast development mode Webpack build process that bundle files into the dist
folder
npm i --save-dev <package_name>
to install new packages
Loading The Chrome Extension
- Open Chrome and navigate to
chrome://extensions/
- Toggle on
Developer mode
in the top right corner
- Click
Load unpacked
- Select the entire
dist
folder
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 include author
, version
, name
and description
- Update
manifest.json
, important fields include version
, name
and description
- Update
webpack.commmon.js
, the title in the getHtmlPlugins
function should be your extension name
npm run build
to generate a minimized production build in the dist
folder
- ZIP the entire
dist
folder (e.g. dist.zip
)
- Publish the ZIP file on the Chrome Web Store Developer Dashboard!
Important Default Boilerplate Notes
- 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
About
Fully featured weather extension that displays weather conditions for multiple cities, and a home-city that attaches to the toolbar!
Languages
Language:TypeScript 85.9%Language:JavaScript 10.9%Language:CSS 3.3%