Home

Awesome

@larscom/ng-chrome-extension

npm-release npm

Easily create Angular Chrome Extensions (manifest v3)

The following scenarios are supported:

Disclaimer

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

How to install

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

Start creating a new project

ng-chrome new

alt text

How to use/develop

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 alt text

Build/package for production

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.