https://github.com/larscom/ng-chrome-extension

CLI tool to generate angular chrome extensions
https://github.com/larscom/ng-chrome-extension

angular browser browser-extension chrome chrome-extension cli extension javascript linux macos ng

Last synced: 4 days ago
JSON representation

CLI tool to generate angular chrome extensions

• Host: GitHub
• URL: https://github.com/larscom/ng-chrome-extension
• Owner: larscom
• License: mit
• Created: 2020-03-28T17:00:14.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-23T09:21:53.000Z (7 months ago)
• Last Synced: 2025-01-15T00:21:23.257Z (11 days ago)
• Topics: angular, browser, browser-extension, chrome, chrome-extension, cli, extension, javascript, linux, macos, ng
• Language: JavaScript
• Homepage:
• Size: 374 KB
• Stars: 176
• Watchers: 10
• Forks: 31
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng-chrome-extension - Easily create Angular Chrome Extensions (manifest v3). (Table of contents / Angular)
• fucking-awesome-angular - ng-chrome-extension - Easily create Angular Chrome Extensions (manifest v3). (Table of contents / Angular)

README

        
# @larscom/ng-chrome-extension

[![npm-release](https://img.shields.io/npm/v/@larscom/ng-chrome-extension.svg?label=npm)](https://www.npmjs.com/package/@larscom/ng-chrome-extension)

![npm](https://img.shields.io/npm/dt/@larscom/ng-chrome-extension)

> Easily create `Angular` Chrome Extensions (manifest v3)

The following scenarios are supported:

- Popup ✓

- New Tab ✓

- Options ✓

- Side Panel ✓

- Service Worker ✓

- Content Page ✓

## Disclaimer

This CLI tool should work on Linux/macOS, it is not tested on Windows.

## How to install

```bash

npm install -g @larscom/ng-chrome-extension

```

## Start creating a new project

```bash

ng-chrome new

```

![alt text](https://snipboard.io/OYcNzx.jpg 'ng-chrome CLI')

## How to use/develop

- change directory to your newly created project

- run `npm run start`

- goto: `chrome://extensions` in the browser and enable `'developer mode'`

- press `Load unpacked` and target the folder `angular/dist`

The project is automatically being watched, any changes to the files will recompile the project.

**NOTE**: changes to the **content page** and **service worker** scripts requires you to reload the extension in `chrome://extensions`

![alt text](https://snipboard.io/KToCI3.jpg 'Angular Chrome Popup')

![alt text](https://snipboard.io/VYfGoD.jpg 'Angular Chrome Tab')

## Build/package for production

- update version number inside `./angular/src/manifest.json`

- run `npm run build:production`

- upload `extension-build.zip` to the chrome webstore.

This will run a production build and will automatically zip it as a extension package in the root folder named: `extension-build.zip`

## Debugging

Run: `npm start`

Go to: Developer tools (inspect popup) => Sources => webpack

You can find your source files (TypeScript) over there.

## Upgrade Angular

After you have created a new project with `ng-chrome` and you want to update angular.

Just follow the regular upgrade guide of angular. See: https://update.angular.io/

## Angular folder

This folder contains the angular source code.

Each feature (popup,options,tab,side-panel) lives inside its own standalone component and gets lazily loaded.

see: `./angular/src/app/modules`

## Chrome folder

This folder contains the content page/service worker scripts and has its own `package.json` to manage it's dependencies.