chrome-extension-cli

    0.2.3 • Public • Published

    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.

    Install

    npm i chrome-extension-cli

    DownloadsWeekly Downloads

    38

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    780 kB

    Total Files

    58

    Last publish

    Collaborators

    • dutiyesh