MACHEX (A React Chrome Extension Boilerplate)

Features

• Manifest V3
• React 18
• TypeScript
• Webpack 5
• Webpack Dev Server 4
• React Hot Loader
• Tailwind V3
• eslint-config-react-app
• Prettier
• Webpack-Automatic-Refresh

Getting Started

1. git clone https://github.com/MahdiTa97/machex.git
2. cd machex
3. npm install
4. npm run start
5. open the chrome://extensions URL and turn on developer mode from the top left and then click; on Load Unpacked and select the build folder.

Scripts

• start
• build
• prettier

Publishing

After the development of your extension run the command

$ NODE_ENV=production npm run build

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

TypeScript

The Options Page is implemented using TypeScript. Refer to `src/pages/Options/' for examples of how to do this.

Content Scripts

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

Let's say that you want to use the myContentScript entry point as the content script, so on your webpack.config.js you will configure the entry point and exclude it from hot reloadings, like this:

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

and on your src/manifest.json:

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

Secrets

If you develop an extension that talks to some APIs, you probably use different keys for testing and production. It is a good practice to avoid committing your secret keys and expose them to anyone with access to the repository.

To this task, this boilerplate imports the file ./secrets.<THE-NODE_ENV>.js on your modules through the module named secrets, so you can do things like this:

./secrets.development.js

export default { key: '123' };

./src/popup.js

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

Files named secret". *. js have already been ignored in the repository.

Credits

• It is largely derived from [lxieyang/chrome-extension-boilerplate-react] which itself is adapted from samuelsimoes/chrome-extension-webpack-boilerplate.