Chrome extension built with React 16+ and Webpack 4+

Open the extension in a new tab, load your whatsapp messages to be sent, and wait for the job to be completed.

1. Ensure Node.js version is >= 8.
2. Run npm install to install the dependencies.
3. Run npm start, this will create a build folder
4. Load the extension on Chrome following:
   1. Access chrome://extensions/
   2. Check Developer mode
   3. Click on Load unpacked extension
   4. Select the build folder.

All the extension's code is placed in the src folder.

To make the workflow much more efficient this project uses the webpack server for development (started with npm start) with auto reload feature that reloads the browser extension automatically every time that we save some file in the editor.

To run the dev mode on other port, just specify the env var port like this:

$ PORT=6002 npm run start

Although this project uses the webpack dev server, it's also prepared to write all the bundles files on the disk at every code change. So we can point, on the extension manifest, to the bundles that we want to use as content scripts, but we need to exclude these entry points from hot reloading (why?). To do so we need to expose which entry points are content scripts on the webpack.config.js using the chromeExtensionCustomOpts -> notHotReload config.

For example, if we want to use the myContentScript entry point as content script, we will configure the entry point and exclude it from hot reloading, like this:

on webpack.config.js:

{
  …
  entry: {
    myContentScript: "./src/js/myContentScript.js"
  },
  chromeExtensionCustomOpts: {
    notHotReload: ["myContentScript"]
  }
  …
}

and on src/manifest.json:

{
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["myContentScript.bundle.js"]
    }
  ]
}

After the development of the extension, run the command

$ NODE_ENV=production npm run build

Now, the content of build folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the official guide to more infos about publishing.

Just import the file ./secrets.<THE-NODE_ENV>.js on the modules through the module named as secrets, so we can do things like this:

./secrets.development.js

export default { key: '123' };

./src/popup.js

import secrets from 'secrets';
ApiCall({ key: secrets.key });

👉 The files with name secrets.*.js already are ignored on the repository.

• Webpack documentation
• Chrome Extension documentation
• Chrome Extension Webpack Boilerplate

• Michael Xieyang Liu | Website - for providing the boilerplate this project started off