{"id":23236608,"url":"https://github.com/ragingwind/generator-chrome-extension","last_synced_at":"2025-05-15T05:08:01.164Z","repository":{"id":6603655,"uuid":"7846848","full_name":"ragingwind/generator-chrome-extension","owner":"ragingwind","description":"Scaffold out a Chrome extension","archived":false,"fork":false,"pushed_at":"2022-04-05T13:13:09.000Z","size":347,"stargazers_count":2637,"open_issues_count":16,"forks_count":219,"subscribers_count":56,"default_branch":"main","last_synced_at":"2025-04-22T07:41:50.524Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://yeoman.io","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/ragingwind.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-27T02:11:08.000Z","updated_at":"2025-04-21T01:21:16.000Z","dependencies_parsed_at":"2022-08-19T07:10:30.162Z","dependency_job_id":null,"html_url":"https://github.com/ragingwind/generator-chrome-extension","commit_stats":null,"previous_names":["ragingwind/generator-chrome-extension","yeoman/generator-chrome-extension"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fgenerator-chrome-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fgenerator-chrome-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fgenerator-chrome-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragingwind%2Fgenerator-chrome-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ragingwind","download_url":"https://codeload.github.com/ragingwind/generator-chrome-extension/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"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":[],"created_at":"2024-12-19T04:01:07.462Z","updated_at":"2025-05-15T05:07:56.155Z","avatar_url":"https://github.com/ragingwind.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# Chrome Extension generator [![Build Status](https://secure.travis-ci.org/yeoman/generator-chrome-extension.svg?branch=master)](http://travis-ci.org/yeoman/generator-chrome-extension)\n\nMaintainer: [Jimmy Moon](https://github.com/ragingwind)\n\n\u003e Chrome Extension generator that creates everything you need to get started with extension development. You can choose Browser UI(Browser,Page Action, Omnibox) type and select into permissions what you need.\n\n## Getting Started\n\n```sh\n# Please make sure that `yo`, `gulp` and `bower` was installed on your system using this command:\nnpm install --global yo gulp-cli bower\n\n# Install the generator:\nnpm install -g generator-chrome-extension\n\n# Make a new directory, and `cd` get into it:\nmkdir my-new-chrome-extension \u0026\u0026 cd $_\n\n# Generate a new project\nyo chrome-extension\n\n# Transform updated source written by ES2015 (default option)\ngulp babel\n\n# or Using watch to update source continuously\ngulp watch\n\n# Make a production version extension\ngulp build\n```\n\n## Test Chrome Extension\n\nTo test, go to: chrome://extensions, enable Developer mode and load app as an unpacked extension.\n\nNeed more information about Chrome Extension? Please visit [Google Chrome Extension Development](http://developer.chrome.com/extensions/devguide.html)\n\n## Generators\n\nAvailable generators:\n\n* [chrome-extension](#app) (aka [chrome-extension:app](#app))\n\n### App\n\nSets up a new Chrome Extension, generating all the boilerplate you need to get started.\n\n```bash\nyo chrome-extension\n```\n\n## gulp tasks\n\n### Babel\n\nThe generator supports ES 2015 syntax through babel transforming. You may have a source files in `script.babel` if your project has been generated without `--no-babel` options. While developing, When those of source has been changed, `gulp babel` should be run before test and run a extension on Chrome.\n\n```sh\ngulp babel\n```\n\nIf you would like to have a continuous transforming by babel you can use `watch` task\n\n### Watch\n\nWatch task helps you reduce your efforts during development extensions. If the task detects your changes of source files, re-compile your sources automatically or Livereload([chromereload.js](https://github.com/yeoman/generator-chrome-extension/blob/master/app/templates/scripts/chromereload.js)) reloads your extension. If you would like to know more about Live-reload and preview of Yeoman? Please see [Getting started with Yeoman and generator-webapp](http://youtu.be/zBt2g9ekiug?t=3m51s) for your understanding.\n\n```bash\ngulp watch\n```\n\nYou need to load/reload extension after starting `gulp watch` for Live-reload to work. \n\nFor content scripts you need to refresh pages where it is used.\n\n### Build and Package\n\nIt will build your app as a result you can have a distribution version of the app in `dist`. Run this command to build your Chrome Extension app.\n\n```bash\ngulp build\n```\n\nYou can also distribute your project with compressed file using the Chrome Developer Dashboard at Chrome Web Store. This command will compress your app built by `gulp build` command.\n\n```bash\ngulp package\n```\n\n## Options\n\n* `--no-babel`\n\n  If you wouldn't use [Babel](https://babeljs.io/) ES2015 transpiler.\n\n* `--skip-install`\n\n  Skips the automatic execution of `bower` and `npm` after\n  scaffolding has finished.\n\n* `--test-framework=[framework]`\n\n  Defaults to `mocha`. Can be switched for\n  another supported testing framework like `jasmine`.\n\n* `--sass`\n\n  Add support for [Sass](http://sass-lang.com/libsass).\n\n* `--all-permissions`\n\n  All of permissions of chrome extension will be shown.\n\n### ES2015 and babel\n\nES2015 is the `default option` in the generator that means you can use es2015 now for developing the Chrome extensions. However, at this moment, you need to execute `babel` task of gulp to compile to test and run your extension on Chrome, because [ES2015 is not full functionality on Chrome as yet](http://kangax.github.io/compat-table/es6/).\n\nThe sources written by es2015 is located at `scripts.babel` and runnable sources will be at `script` after compiling by `gulp babel`. May you don't want to use babel and ES2015 use `--no-babel` option when scaffolding a new project.\n\n```sh\nyo chrome-extension --no-babel\n```\n\n### Sass\n\nThis generator supports `sass` through `--sass` options and generate `scss` boilerplate files at `styles.scss` that those of `scss` files will be compiled to `styles` via `gulp style` task. To do this, `libsass` is featured in the generator. Please see [this](https://github.com/yeoman/generator-gulp-webapp#libsass) for further information.\n\n```sh\nyo chrome-extension --sass\n```\n\n### All of Permissions for Chrome Extension\n\nNeed to add more permissions for chrome extension? You can get all list of permissions using `--all-permissions` option when scaffolding a new project.\n\n```sh\nyo chrome-extension --all-permissions\n```\n\n## Contribute\n\nSee the [contributing docs](https://github.com/yeoman/yeoman/blob/master/contributing.md)\n\n## License\n\n[BSD license](http://opensource.org/licenses/bsd-license.php)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fragingwind%2Fgenerator-chrome-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fragingwind%2Fgenerator-chrome-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fragingwind%2Fgenerator-chrome-extension/lists"}