React Chrome Extension CLI

The CLI next Chrome Extension. 🚀

Quick Overview

npm install -g react-chrome-extension-cli
react-chrome-extension-cli my-extension
cd my-extension
npm run watch

Then follow these instructions to see your extension:

1. Open chrome://extensions
2. Check the Developer mode checkbox
3. Click on the Load unpacked extension button
4. Select the folder my-extension/build

When you're ready to publish to Chrome Web Store, create a minified bundle with npm run build and then zip the build folder.

Get Started Immediately

You don’t need to install or configure Webpack. Webpack comes in preconfigured, so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an Extension

Installation

npm install -g react-chrome-extension-cli

Usage

react-chrome-extension-cli <project-name>

Example:

react- chrome-extension-cli my-react-extension

It will create a directory called my-extension inside the current folder.

my-extension
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── config                    // Webpack with minimal configurations
│   ├── paths.js
│   ├── webpack.common.js
│   └── webpack.config.js
├── public
│   ├── icons
│   │   ├── logo.png
│   ├── *.html                // HTML files will vary depending on extension type
│   └── manifest.json
└── src
    ├── *.css                 // CSS files will vary depending on extension type
    └── *.js                  // JS files will vary depending on extension type

Once the installation is done, you can open your project folder:

cd my-extension

Inside the newly created project, you can run some built-in commands:

npm run watch

一定要调整为开发者模式 当使用 npm run build 打包完毕，可以加载到 chrome 浏览器中

1. 打开 chrome://extensions
2. 确保打开了开发者模式
3. 点击 Load unpacked extension 按钮
4. 选中 my-extension/build 目录

npm run build

Builds the app for production to the build folder. Zip the build folder and your app is ready to be published on Chrome Web Store.