react-chrome-extension

React Chrome Extension Boilerplate

Getting Started

• 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

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 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

Production Build

• 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

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

• deploy: https://blog.plasmo.com/p/edge-extension

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

Edge Guide: https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/api/using-addons-api#before-you-begin

https://microsoftedge.microsoft.com/addons/detail/ehocanhnhbdiobliklhnfbaflmfmdccd