{"id":20424336,"url":"https://github.com/avivharuzi/chrome-extension-starter","last_synced_at":"2025-04-12T18:43:59.697Z","repository":{"id":40359715,"uuid":"492537930","full_name":"avivharuzi/chrome-extension-starter","owner":"avivharuzi","description":"Chrome Extension starter using Nx workspace and Angular","archived":false,"fork":false,"pushed_at":"2024-07-17T09:40:10.000Z","size":1468,"stargazers_count":36,"open_issues_count":1,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-26T13:01:41.682Z","etag":null,"topics":["angular","chrome","chrome-devtools","chrome-extension","nx","nx-workspace","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/avivharuzi.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.config.js","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":"2022-05-15T16:13:21.000Z","updated_at":"2025-03-04T22:07:50.000Z","dependencies_parsed_at":"2022-08-18T04:50:29.297Z","dependency_job_id":null,"html_url":"https://github.com/avivharuzi/chrome-extension-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fchrome-extension-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fchrome-extension-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fchrome-extension-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avivharuzi%2Fchrome-extension-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avivharuzi","download_url":"https://codeload.github.com/avivharuzi/chrome-extension-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248617182,"owners_count":21134190,"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":["angular","chrome","chrome-devtools","chrome-extension","nx","nx-workspace","typescript"],"created_at":"2024-11-15T07:09:15.000Z","updated_at":"2025-04-12T18:43:59.677Z","avatar_url":"https://github.com/avivharuzi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chrome Extension Starter\n\n![Chrome Extension Starter Logo](.github/images/logo.png)\n\nChrome Extension starter using Nx workspace and Angular.\n\n## 📖 Table of Contents\n\n- [Features](#✨-Features)\n- [Prerequisites](#🎯-Prerequisites)\n- [Getting Started](#🚀-Getting-Started)\n- [Project Structure](#🏗-Project-Structure)\n- [Commands](#🕹-Commands)\n- [Release](#📦-Release)\n- [License](#📜-License)\n\n## ✨ Features\n\n✅ Nx Workspace\n\n✅ Angular\n\n✅ Typescript\n\n✅ Chrome Types\n\n✅ Live Reload\n\n✅ Very Fast Build\n\n✅ All In One Command\n\n✅ Support Manifest V3\n\n✅ Popup Page\n\n✅ Options Page\n\n✅ Devtools Panel\n\n✅ Background Script\n\n✅ Content Script\n\n## 🎯 Prerequisites\n\n- [Node.js](https://nodejs.org) (\u003e= 16 required)\n- npm package manager (\u003e= 8 required)\n- [Chrome](https://www.google.com/chrome)\n\n## 🚀 Getting Started\n\n1. Install dependencies\n\n```shell\nnpm i\n```\n\n2. Run development live reload\n\n```shell\nnpm run start:dev\n```\n\n3. Open Chrome browser\n4. Go to this url: `chrome://extensions`\n5. Click on `\"Developer mode\"`\n6. Click on `\"Load unpacked\"`\n7. Choose the `extension` directory from this root directory\n8. Yay, you did it! 😏\n9. Now update the code as you want! 😛\n\n\u003e ℹ️ More info about developing Chrome extension can be found [here](https://developer.chrome.com/docs/extensions/mv3)\n\n## 🏗 Project Structure\n\nSo the purpose is to take the advantage of the type system of TypeScript and to use the power of Nx workspace to create multiple applications with the powerful framework Angular!\n\nSo we have 3 applications:\n\n1. Popup (`apps/popup`) - used for the upper popup\n2. Options (`apps/options`) - used for the options page\n3. DevTools Panel (`apps/devtools-panel`) - used for the devtools panel\n\nIn every Chrome extension we have background script that communicate with the content scripts, which can be found in `apps/scripts/background/src/main.ts`.\n\nWe are also can inject content script which can be found in `apps/scripts/content/src/main.ts`.\n\nAll the applications have already the Chrome types so can just use `chrome` and the editor will recognize it.\n\n## 🕹 Commands\n\nStart with development configuration\n\n```shell\nnpm run start:dev\n```\n\nStart with production configuration.\n\n```shell\nnpm run start:prod\n```\n\nBuild with development configuration.\n\n```shell\nnpm run build:dev\n```\n\nBuild with production configuration.\n\n```shell\nnpm run build:prod\n```\n\n## 📦 Release\n\nI recommend making the release automatic with GitHub actions or other ci service.\n\n- Bump the version number in `manifest.json`\n- Create a git tag containing the version you are releasing using `git tag -a \u003cversion\u003e`\n- Run `npm run build:prod`\n- Create zip file from the extension directory\n- Upload the zip to the Chrome developer dashboard\n\n## 📜 License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favivharuzi%2Fchrome-extension-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favivharuzi%2Fchrome-extension-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favivharuzi%2Fchrome-extension-starter/lists"}