https://github.com/dutiyesh/chrome-extension-cli Skip to content Sign up * Product + Features + Mobile + Actions + Codespaces + Packages + Security + Code review + Issues + Integrations + GitHub Sponsors + Customer stories * Team * Enterprise * Explore + Explore GitHub + Learn and contribute + Topics + Collections + Trending + Learning Lab + Open source guides + Connect with others + The ReadME Project + Events + Community forum + GitHub Education + GitHub Stars program * Marketplace * Pricing + Plans + Compare plans + Contact Sales + Education [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} dutiyesh / chrome-extension-cli Public * Notifications * Fork 56 * Star 1.2k The CLI for your next Chrome Extension MIT License 1.2k stars 56 forks Star Notifications * Code * Issues 6 * Pull requests 2 * Actions * Projects 0 * Wiki * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Wiki * Security * Insights This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. master Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 2 branches 8 tags Code Latest commit @dutiyesh dutiyesh Bump version to 1.1.0 ... 114947a Apr 17, 2022 Bump version to 1.1.0 114947a Git stats * 63 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time assets config scripts templates utils .editorconfig .gitignore CHANGELOG.md CONTRIBUTING.md FAQ.md LICENSE README.md index.js package-lock.json package.json View code [ ] Chrome Extension CLI Quick Overview Get Started Immediately Creating an Extension Installation Usage npm run watch npm run build What's included? Extension types Popup Override page DevTools CLI options chrome-extension-cli my-extension --override-page chrome-extension-cli my-extension --devtools chrome-extension-cli my-extension --language Contributing FAQs License 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 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. chrome-extension-cli my-extension --language Creates an extension for supported languages like JavaScript and TypeScript. By default extension is created for JavaScript language and you can also pass other value to --language option to create extension for TypeScript. chrome-extension-cli my-extension // Language JavaScript (default) chrome-extension-cli my-extension --language=javascript // Language JavaScript chrome-extension-cli my-extension --language=typescript // Language TypeScript 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. About The CLI for your next Chrome Extension Topics nodejs javascript cli chrome typescript extension Resources Readme License MIT License Stars 1.2k stars Watchers 14 watching Forks 56 forks Releases 8 1.1.0 (April 17, 2022) Latest Apr 17, 2022 + 7 releases Packages 0 No packages published Used by 5 * @felixrmann @felixrmann / menu_planer_chrome_extension * @anthroarts @anthroarts / RegExtension * @kromate @kromate / Pluralsight-chrome-extension Contributors 2 * @dutiyesh dutiyesh Dutiyesh Salunkhe * @sytranvn sytranvn Sy Tran Dung Languages * JavaScript 60.5% * TypeScript 19.5% * CSS 14.5% * HTML 5.5% * (c) 2022 GitHub, Inc. * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.