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:
- Open chrome://extensions
- Check the Developer mode checkbox
- Click on the Load unpacked extension button
- 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.
Inside that directory, it will generate the initial project structure and install the transitive dependencies, includes `React`, `Ant`
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 ๆต่งๅจไธญ
- ๆๅผ chrome://extensions
- ็กฎไฟๆๅผไบๅผๅ่ ๆจกๅผ
- ็นๅป Load unpacked extension ๆ้ฎ
- ้ไธญ 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.