{"id":13473149,"url":"https://github.com/dutiyesh/chrome-extension-cli","last_synced_at":"2025-05-13T23:04:03.371Z","repository":{"id":39747850,"uuid":"208818963","full_name":"dutiyesh/chrome-extension-cli","owner":"dutiyesh","description":"🚀 The CLI for your next Chrome Extension","archived":false,"fork":false,"pushed_at":"2024-11-18T20:17:06.000Z","size":1549,"stargazers_count":2425,"open_issues_count":26,"forks_count":103,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-30T12:17:20.136Z","etag":null,"topics":["chrome","cli","extension","javascript","nodejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dutiyesh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-16T14:21:32.000Z","updated_at":"2025-04-29T04:31:03.000Z","dependencies_parsed_at":"2024-01-13T16:23:32.138Z","dependency_job_id":"b871cb35-3bff-4fe9-8657-fc83ce58c891","html_url":"https://github.com/dutiyesh/chrome-extension-cli","commit_stats":{"total_commits":67,"total_committers":4,"mean_commits":16.75,"dds":0.04477611940298509,"last_synced_commit":"83cb2f1cfa598a017f0cb9e010810f7adc744445"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutiyesh%2Fchrome-extension-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutiyesh%2Fchrome-extension-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutiyesh%2Fchrome-extension-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dutiyesh%2Fchrome-extension-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dutiyesh","download_url":"https://codeload.github.com/dutiyesh/chrome-extension-cli/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040415,"owners_count":22004533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","cli","extension","javascript","nodejs","typescript"],"created_at":"2024-07-31T16:01:01.224Z","updated_at":"2025-05-13T23:04:03.342Z","avatar_url":"https://github.com/dutiyesh.png","language":"JavaScript","readme":"# Chrome Extension CLI\n\nThe CLI for your next Chrome Extension. 🚀\n\n\u003cp\u003e\n  \u003ca href=\"https://www.producthunt.com/posts/chrome-extension-cli?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-chrome-extension-cli\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=170461\u0026theme=light\" alt=\"Chrome Extension CLI - The CLI for your next Chrome extension 🚀 | Product Hunt Embed\" style=\"width: 200px; height: 42px;\" width=\"200px\" height=\"42px\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.producthunt.com/posts/chrome-extension-cli?utm_source=badge-top-post-badge\u0026utm_medium=badge\u0026utm_souce=badge-chrome-extension-cli\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=170461\u0026theme=light\u0026period=daily\" alt=\"Chrome Extension CLI - The CLI for your next Chrome extension 🚀 | Product Hunt Embed\" style=\"width: 200px; height: 42px;\" width=\"200px\" height=\"42px\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Quick Overview\n\n```sh\nnpm install -g chrome-extension-cli\nchrome-extension-cli my-extension\ncd my-extension\nnpm run watch\n```\n\nThen follow these instructions to see your extension:\n1. Open **chrome://extensions**\n2. Check the **Developer mode** checkbox\n3. Click on the **Load unpacked extension** button\n4. Select the folder **my-extension/build**\n\nWhen you're ready to publish to Chrome Web Store, create a minified bundle with `npm run build` and zip it with `npm run pack`.\nOr you can zip the `build` folder manually.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"600\" height=\"413\" src=\"assets/installation.png\" alt=\"Chrome Extension CLI\"\u003e\n  \u003cimg width=\"600\" height=\"413\" src=\"assets/development.png\" alt=\"Chrome Extension CLI\"\u003e\n\u003c/div\u003e\n\n### Get Started Immediately\n\nYou **don’t** need to install or configure Webpack.\u003cbr\u003e\nWebpack comes in preconfigured, so that you can focus on the code.\n\nJust create a project, and you’re good to go.\n\n## Creating an Extension\n\n### Installation\n\n```sh\nnpm install -g chrome-extension-cli\n```\n\n### Usage\n\n```sh\nchrome-extension-cli \u003cproject-name\u003e\n```\n\nExample:\n```sh\nchrome-extension-cli my-extension\n```\n\nIt will create a directory called `my-extension` inside the current folder.\u003cbr\u003e\nInside that directory, it will generate the initial project structure and install the transitive dependencies:\n\n```\nmy-extension\n├── README.md\n├── node_modules\n├── package.json\n├── .gitignore\n├── config                    // Webpack with minimal configurations\n│   ├── paths.js\n│   ├── webpack.common.js\n│   └── webpack.config.js\n├── public\n│   ├── icons\n│   │   ├── icon_16.png\n│   │   ├── icon_32.png\n│   │   ├── icon_48.png\n│   │   ├── icon_128.png\n│   ├── *.html                // HTML files will vary depending on extension type\n│   └── manifest.json\n└── src\n    ├── *.css                 // CSS files will vary depending on extension type\n    └── *.js                  // JS files will vary depending on extension type\n```\n\nOnce the installation is done, you can open your project folder:\n\n```sh\ncd my-extension\n```\n\nInside the newly created project, you can run some built-in commands:\n\n### `npm run watch`\n\nRuns the app in development mode.\u003cbr\u003e\nThen follow these instructions to see your app:\n1. Open **chrome://extensions**\n2. Check the **Developer mode** checkbox\n3. Click on the **Load unpacked extension** button\n4. Select the folder **my-extension/build**\n\n### `npm run build`\n\nBuilds the app for production to the build folder.\u003cbr\u003e\nRun `npm run pack` to\nzip the build folder and your app is ready to be published on Chrome Web Store.\u003cbr\u003e\nOr you can zip it manually.\n\n### `npm run pack`\n\nPacks the build folder into a zip file under release folder.\n\n### `npm run repack`\n\nRebuilds and packs the app into a zip file.\nIt is a shorthand for `npm run build \u0026\u0026 npm run pack`.\n\n### `npm run format`\n\nFormats all the HTML, CSS, JavaScript, TypeScript and JSON files.\n\n## What's included?\n\nYour environment will have everything you need to build a Chrome Extension:\n\n- ES6 syntax support.\n- A watch script to listen file changes and build automatically.\n- A build script to bundle JS, CSS, and images for production.\n\n## Extension types\n\nWith Chrome Extension CLI you can built any of the below extensions:\n\n### Popup\n\nAdd features to Active Tab.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cfigure\u003e\n    \u003cimg width=\"500\" height=\"322\" src=\"./assets/template-popup.png\" alt=\"Popup template\"\u003e\n  \u003c/figure\u003e\n\u003c/div\u003e\n\n\n### Override page\n\nOverride default page like New Tab, Bookmarks, or History page.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cfigure\u003e\n    \u003cimg width=\"500\" height=\"322\" src=\"./assets/template-page.png\" alt=\"Override page template\"\u003e\n  \u003c/figure\u003e\n\u003c/div\u003e\n\n\n### DevTools\n\nAdd features to Chrome Developer Tools.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cfigure\u003e\n    \u003cimg width=\"500\" height=\"322\" src=\"./assets/template-panel.png\" alt=\"DevTools Panel template\"\u003e\n  \u003c/figure\u003e\n\u003c/div\u003e\n\n\n### Side Panel\n\nAdd features to Chrome Side Panel.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cfigure\u003e\n    \u003cimg width=\"500\" height=\"322\" src=\"./assets/template-side-panel.png\" alt=\"Side Panel template\"\u003e\n  \u003c/figure\u003e\n\u003c/div\u003e\n\nMore information about [templates](templates/README.md).\n\n## CLI options\n\n#### `chrome-extension-cli my-extension --override-page`\n\nCreates an extension that overrides default New Tab page.\u003cbr\u003e\nYou can also pass other values to `--override-page` option to override other default pages like Bookmarks and History page.\n\n```\nchrome-extension-cli my-extension --override-page              // Override New Tab page\nchrome-extension-cli my-extension --override-page=bookmarks    // Override Bookmarks page\nchrome-extension-cli my-extension --override-page=history      // Override History page\n```\n\n#### `chrome-extension-cli my-extension --devtools`\n\nCreates a Panel inside developer tools.\n\n#### `chrome-extension-cli my-extension --side-panel`\n\nCreates a Panel in the browser's side panel alongside the main content of a webpage.\n\n#### `chrome-extension-cli my-extension --language`\n\nCreates an extension for supported languages like JavaScript and TypeScript.\u003cbr\u003e\nBy default extension is created for JavaScript language and you can also pass other value to `--language` option to create extension for TypeScript.\n\n```\nchrome-extension-cli my-extension                          // Language JavaScript (default)\nchrome-extension-cli my-extension --language=javascript    // Language JavaScript\nchrome-extension-cli my-extension --language=typescript    // Language TypeScript\n```\n\n## Contributing\n\nSee the [contribution guide](CONTRIBUTING.md) and join the contributors!\n\n## FAQs\n\nSee the [FAQs](FAQ.md).\n\n## License\n\nChrome Extension CLI is open source software [licensed as MIT](LICENSE).\n\n---\n\n_Many thanks to [create-react-app](https://github.com/facebook/create-react-app/blob/master/README.md) for the inspiration with this readme file._\n\n_Jupiter Icon used in templates made by [Freepik](https://www.freepik.com/home) from [www.flaticon.com](http://www.flaticon.com/)._\n","funding_links":[],"categories":["JavaScript","cli"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdutiyesh%2Fchrome-extension-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdutiyesh%2Fchrome-extension-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdutiyesh%2Fchrome-extension-cli/lists"}