{"id":23701018,"url":"https://github.com/lennetech/chrome-extension-angular-starter","last_synced_at":"2025-09-03T05:32:02.860Z","repository":{"id":38682530,"uuid":"211647974","full_name":"lenneTech/chrome-extension-angular-starter","owner":"lenneTech","description":"Starter for the development of Chrome extensions with the help of Angular","archived":false,"fork":false,"pushed_at":"2023-01-07T10:12:16.000Z","size":1455,"stargazers_count":6,"open_issues_count":22,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-02T22:47:51.359Z","etag":null,"topics":["angular","angular8","chrome","chrome-extensions","chrome-plugin","extension","plugin","starter-project","starter-template"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/lenneTech.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-09-29T10:48:27.000Z","updated_at":"2022-07-17T16:16:50.000Z","dependencies_parsed_at":"2023-02-06T21:32:08.707Z","dependency_job_id":null,"html_url":"https://github.com/lenneTech/chrome-extension-angular-starter","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fchrome-extension-angular-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fchrome-extension-angular-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fchrome-extension-angular-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fchrome-extension-angular-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenneTech","download_url":"https://codeload.github.com/lenneTech/chrome-extension-angular-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231837450,"owners_count":18433965,"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","angular8","chrome","chrome-extensions","chrome-plugin","extension","plugin","starter-project","starter-template"],"created_at":"2024-12-30T09:31:32.198Z","updated_at":"2024-12-30T09:31:32.821Z","avatar_url":"https://github.com/lenneTech.png","language":"TypeScript","readme":"# Starter for Chrome Extension via Angular\n\nThis is the lenne.Tech starter for new Chrome Extension via Angular. \nIt's based on the [Angular Chrome Extension Scaffold Project](https://github.com/larscom/angular-chrome-extension) \ndeveloped by [Lars Kniep](https://github.com/larscom).\n\nThe [development area of chrome](https://developer.chrome.com/extensions/getstarted) provides more information on \ndeveloping extensions for Chrome.\n\n## How to use/develop\n- clone this repository\n- run `npm install`\n- run `npm start`\n- goto: `chrome://extensions` in the browser and enable 'developer mode'\n- press `Load unpacked` and target the folder `angular/dist`\n\nThe project is automatically being watched, any changes to the files will recompile the project.\n\n**NOTE**: changes to the contentPage/backgroundPage requires you to reload the extension in `chrome://extensions`\n\n\n## Build/package for production\n\n- run `npm run build:production`\n- upload `extension-build.zip` to the chrome webstore.\n- (optional) you can also manually zip your extension, the production build will output to folder `angular/dist`\n\nThis will run a production build and will automatically zip it as a extension package in the root folder `./` named: \n`extension-build.zip`\n\n**NOTE**: Do not forget to update the version number inside `manifest.json`\n\n## Data and logic areas\n\nThe extension is divided into several areas:\n\n- Angular App (SPA / PWA) that runs in a separate browser window (see `angular/src/`)\n- Background script that runs even if the Angular App is not open (see `chrome/src/background.ts`)\n- Site script that is integrated into the site when the corresponding URL is called (see `chrome/src/site.ts`)\n- Chrome storage that holds the data ready in case the app or browser is closed \n(see ChromeHelper.getFromStorage and ChromeHelper.getFromStorage in `angular/src/app/core/helper/chrome.helper.ts`)\n\n## Communication between the areas\nCommunication is organized via the `chrome.tabs` and `chrome.runtime` messages: \n\n- `chrome.tabs` is used to send messages to the site script.  \n- `chrom.runtime` is used to send messages to the app and the background script.\n\nSince `chrome.runtime` addresses both the app and the background script at the same time, they must check who a new \nmessage is intended for when they receive it. Differentiation can be made via the Enum ActionType\n(see `src/app/core/enums/action-type.enum.ts`).\n\nThe recommended communication channels are:\n\n- App =\u003e Background script\n- App =\u003e Site script\n- Background script =\u003e App\n- Site script =\u003e Background script\n\nBackground =\u003e Site script is may be useful in some cases, but a communication from Site script =\u003e App can run empty if \nthe app is not opened.\n\n## Using extension as **New Tab**\nIf you decide to use `chrome_url_overrides` for the extension to take over the new tab page. \nYou need to set the `base-href` inside `index.html` to `\u003cbase href=\"#/\"\u003e` \n\n## Using extension via **PopUp**\nConfig `browser_action` in angular/src/manifest.json:\n\n```\n\"browser_action\": {\n    \"default_popup\": \"index.html\",\n    \"default_title\": \"Angular Chrome Extension\"\n  },\n```\nand change handling in chorme/src/background.ts.\n\n## Directories\n- `src`: This folder contains the source code of the angular app.\n- `chrome`: This folder contains the background \u0026 site script for the google chrome extension.\n\n## Thanks\n\nMany thanks to the developers of the \n[Angular Chrome Extension Scaffold Project](https://github.com/larscom/angular-chrome-extension)\nand all the developers whose packages are used here.\n\n## License\n\nMIT - see LICENSE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennetech%2Fchrome-extension-angular-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flennetech%2Fchrome-extension-angular-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennetech%2Fchrome-extension-angular-starter/lists"}