Skip to content
πŸš€ The CLI for your next Chrome Extension
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 8227240 Oct 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Add template screenshots Sep 15, 2019
config Document webpack file Sep 14, 2019
scripts Dynamically create README file Sep 15, 2019
templates Fix gitignore issue Sep 20, 2019
utils Dynamically create manifest file Sep 14, 2019
.editorconfig Init commit Sep 14, 2019
.gitignore Init commit Sep 14, 2019
CHANGELOG.md Bump version to 0.2.0 Sep 20, 2019
CONTRIBUTING.md Add Contribution file Sep 15, 2019
FAQ.md Add FAQ file Sep 15, 2019
LICENSE Add LICENSE file Sep 15, 2019
README.md Add Product Hunt badges Oct 14, 2019
index.js Fix gitignore issue Sep 20, 2019
package-lock.json Dynamically create package file Sep 14, 2019
package.json Bump version to 0.2.0 Sep 20, 2019

README.md

Chrome Extension CLI

The CLI for your next Chrome Extension. πŸš€

Chrome Extension CLI - The CLI for your next Chrome extension πŸš€ | Product Hunt Embed Chrome Extension CLI - The CLI for your next Chrome extension πŸš€ | Product Hunt Embed

Quick Overview

npm install -g chrome-extension-cli
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.

Chrome Extension CLI Chrome Extension CLI

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 chrome-extension-cli

Usage

chrome-extension-cli <project-name>

Example:

chrome-extension-cli my-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:

my-extension
β”œβ”€β”€ README.md
β”œβ”€β”€ node_modules
β”œβ”€β”€ package.json
β”œβ”€β”€ .gitignore
β”œβ”€β”€ config                    // Webpack with minimal configurations
β”‚   β”œβ”€β”€ paths.js
β”‚   β”œβ”€β”€ webpack.common.js
β”‚   └── webpack.config.js
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ icons
β”‚   β”‚   β”œβ”€β”€ icon_16.png
β”‚   β”‚   β”œβ”€β”€ icon_32.png
β”‚   β”‚   β”œβ”€β”€ icon_48.png
β”‚   β”‚   β”œβ”€β”€ icon_128.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

Runs the app in development mode.
Then follow these instructions to see your app:

  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

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.

What's included?

Your environment will have everything you need to build a Chrome Extension:

  • ES6 syntax support.
  • A watch script to listen file changes and build automatically.
  • A build script to bundle JS, CSS, and images for production.

Extension types

With Chrome Extension CLI you can built any of the below extensions:

Popup

Add features to Active Tab.

Popup template

Override page

Override default page like New Tab, Bookmarks, or History page.

Override page template

DevTools

Add features to Chrome Developer Tools.

DevTools Panel template

More information about templates.

CLI options

chrome-extension-cli my-extension --override-page

Creates an extension that overrides default New Tab page.
You can also pass other values to --override-page option to override other default pages like Bookmarks and History page.

chrome-extension-cli my-extension --override-page              // Override New Tab page
chrome-extension-cli my-extension --override-page=bookmarks    // Override Bookmarks page
chrome-extension-cli my-extension --override-page=history      // Override History page

chrome-extension-cli my-extension --devtools

Creates a Panel inside developer tools.

Contributing

See the contribution guide and join the contributors!

FAQs

See the FAQs.

License

Chrome Extension CLI is open source software licensed as MIT.


Many thanks to create-react-app for the inspiration with this readme file.

Jupiter Icon used in templates made by Freepik from www.flaticon.com.

You can’t perform that action at this time.