0.2.2 • Published 6 months ago
react-chrome-extension v0.2.2
React Chrome Extension Boilerplate
Getting Started
npm i
to install dependanciesnpm start
to start running the fast development mode Webpack build process that bundle files into thedist
foldernpm 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
Important Initial Steps
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
Production Build
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!
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
Publishing to Webstores
Microsoft Edge
- Partner center: https://partner.microsoft.com/en-us/dashboard/microsoftedge/6c8cbd1e-4817-4b37-8a66-ac1ff9ee3bf1/packages/dashboard
API Keys: https://partner.microsoft.com/en-us/dashboard/microsoftedge/publishapi
Web Ext: https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#web-ext_sign
Edge Docs: https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension
https://microsoftedge.microsoft.com/addons/detail/ehocanhnhbdiobliklhnfbaflmfmdccd