- Manifest V3
- React 18
- TypeScript
- Webpack 5
- Webpack Dev Server 4
- React Hot Loader
- Tailwind V3
- eslint-config-react-app
- Prettier
- Webpack-Automatic-Refresh
git clone https://github.com/MahdiTa97/machex.git
cd machex
npm install
npm run start
- open the
chrome://extensions
URL and turn on developer mode from the top left and then click; onLoad Unpacked
and select thebuild
folder.
start
build
prettier
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.
The Options
Page is implemented using TypeScript. Refer to `src/pages/Options/' for examples of how to do this.
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"]
}
]
}
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.
- It is largely derived from [lxieyang/chrome-extension-boilerplate-react] which itself is adapted from samuelsimoes/chrome-extension-webpack-boilerplate.