{"id":15711257,"url":"https://github.com/bluepropane/chromex","last_synced_at":"2025-04-15T16:18:00.439Z","repository":{"id":36432822,"uuid":"216234125","full_name":"bluepropane/chromex","owner":"bluepropane","description":"Create chrome extensions in minutes","archived":false,"fork":false,"pushed_at":"2023-01-11T20:44:42.000Z","size":4002,"stargazers_count":8,"open_issues_count":48,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T16:17:45.865Z","etag":null,"topics":["chrome","chrome-extension","chrome-extensions","chromex","create-chrome-extension","extensions"],"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/bluepropane.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-19T16:13:16.000Z","updated_at":"2022-11-18T23:58:18.000Z","dependencies_parsed_at":"2023-01-17T01:32:24.679Z","dependency_job_id":null,"html_url":"https://github.com/bluepropane/chromex","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepropane%2Fchromex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepropane%2Fchromex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepropane%2Fchromex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluepropane%2Fchromex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluepropane","download_url":"https://codeload.github.com/bluepropane/chromex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249105474,"owners_count":21213537,"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","chrome-extension","chrome-extensions","chromex","create-chrome-extension","extensions"],"created_at":"2024-10-03T21:12:19.333Z","updated_at":"2025-04-15T16:18:00.417Z","avatar_url":"https://github.com/bluepropane.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![MIT License][license-shield]][license-url]\n\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/bluepropane/chromex\"\u003e\n    \u003cimg src=\"docs/assets/logo.png\" alt=\"Logo\" width=\"128\" height=\"128\"\u003e\n  \u003c/a\u003e\n\n  \u003ch2 align=\"center\"\u003echromex\u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    Fast and easy framework for development of Google Chrome extensions\n    \u003cbr /\u003e\n    \u003ca href=\"#quickstart\"\u003e\u003cstrong\u003eGet started »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n   Got an issue? Report it \u003ca href=\"https://github.com/bluepropane/chromex/issues\"\u003ehere\u003c/a\u003e\n    \u003cbr /\u003e\n    -\n    \u003cbr /\u003e\n    Request features \u003ca href=\"https://github.com/bluepropane/chromex/issues\"\u003e here\u003c/a\u003e\n    \u003cbr/\u003e\n    -\n    \u003cbr/\u003e\n    Questions? \u003ca href=\"#contact\"\u003eReach out!\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n**Table of Contents**\n\n- [Features](#features)\n- [Prerequisites](#prerequisites)\n- [Quickstart](#quickstart)\n- [Documentation](#documentation)\n    - [1. Overview](#1-overview)\n    - [2. Customizing Extension Pages](#2-customizing-extension-pages)\n    - [3. Publishing your extension](#3-publishing-your-extension)\n- [Roadmap](#roadmap)\n- [Contact](#contact)\n- [Contributing](#contributing)\n- [Acknowledgements](#acknowledgements)\n- [License](#license)\n\n\n## Features\n\n- Fully working, zero configuration prototype in minutes\n- ES6+Webpack development\n- Live reloading of extension pages during development\n- [Preact](https://preactjs.com) as frontend framework\n- CLI tools to generate pages as required for your extension. Currently supports popular use cases:\n    - [Browser action popup](https://developer.chrome.com/extensions/browserAction)\n    - [Background Script](https://developer.chrome.com/extensions/background_pages)\n    - [Content Scripts](https://developer.chrome.com/extensions/content_scripts)\n    - [New tab override](https://developer.chrome.com/extensions/override)\n    - [Options page](https://developer.chrome.com/extensions/options)\n- Auto resizing and generation of icon sizes based on Google Chrome's [manifest requirements](https://developer.chrome.com/extensions/manifest/icons)\n\n## Prerequisites\n- Knowledge of javascript is a **must**\n- Knowledge of chrome extension development is **good to have** \n- `nodeJS \u003e= 8.9.0`\n- `npm \u003e= 5.2.0` (`npx` support)\n- `Chrome \u003e= 55`\n\nThis project was developed on macOS, so it should work fine on Linux-based systems. You might run into issues developing on Windows as it hasn't been tested yet. In any case, report issues [here!](https://github.com/bluepropane/chromex/issues)\n\n## Quickstart\nEnough talking, give me my extension!\n\nIn this demo, we will create a simple extension with a browser action popup.\n\n**1. Generate the project folder**\n\n  Run the following command in your terminal:\n\n     npx @chromex/init my-extension\n\n  After some output, a folder named `my-extension` will be generated in the current working directory. \n\n\n**2. Start the development server**\n\n    cd my-extension\n    npm run dev\n\n  After some more output to the terminal, you should see a folder named `ext/` created in `my-extension/`. \n\n\n**3. Load unpacked extension**\n\n  Navigate to [chrome://extensions](chrome://extensions) on your chrome browser and click on the `Load unpacked` button (If you don't see it, you might have to enable `Developer mode` on the top right corner of the same page first). Select the generated `ext/` folder from your project root as the target extension directory.\n\n  ![Load unpacked](docs/assets/load_unpacked.png)\n\n\n\n**4. *Voila!***\n\n  Your extension should appear in the chrome extensions list now, and the extension icon should appear in the extension bar (top right corner of your browser window). Click on it to see the boilerplate popup page. You have just completed setting up your first extension environment!\n\n  ![Voila](docs/assets/voila.png)\n\n\n## Documentation\n\n#### [1. Overview](https://github.com/bluepropane/chromex/blob/master/docs/1-Overview.md)\n\n#### [2. Customizing Extension Pages](docs/2-Extension-Pages.md)\n\n#### [3. Publishing your extension](docs/3-Publishing.md)\n\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\n1.  Support page templates using other frontend frameworks e.g. [React](https://reactjs.org), [Vue](https://vuejs.org) (currently supports only [preact](https://preactjs.com))\n2.  More comprehensive documentation\n3.  [HMR](https://webpack.js.org/concepts/hot-module-replacement/) Support\n4.  Better testing\n\n\n\n\u003c!-- CONTACT --\u003e\n## Contact\n\n[@bluepropane1](https://twitter.com/bluepropane1) - rbluepropane@gmail.com\n\nProject Link: [https://github.com/bluepropane/chromex](https://github.com/bluepropane/chromex)\n\n\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\nI started on this project simply because I am interested in chrome extensions. Still active in the process of developing it but can't do everything solo, so any contribution at all is greatly appreciated! You drop me a message, create an [issue](https://github.com/bluepropane/chromex/issues) or [pull request](https://github.com/bluepropane/chromex/pulls) :)\n\n\n\nIt doesn't have to fix a problem - it can also be something you have in mind that will make developing chrome extensions more efficient for everyone! \n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n## Acknowledgements\n\n* [rubenspgcavalcante's `webpack-extension-reloader`](https://github.com/rubenspgcavalcante/webpack-extension-reloader) for inspiration on live reloading of chrome extensions\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See [`LICENSE`](LICENSE) for more information.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n.\n\n\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n[license-shield]: https://img.shields.io/github/license/bluepropane/chromex\n[license-url]: https://github.com/bluepropane/chromex/blob/master/LICENSE\n[product-screenshot]: images/screenshot.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluepropane%2Fchromex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluepropane%2Fchromex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluepropane%2Fchromex/lists"}