Easily create
Angular
Chrome Extensions (manifest v3)
The following scenarios are supported:
This CLI tool should work on Linux/macOS, it is not tested on Windows.
npm install -g @larscom/ng-chrome-extension
ng-chrome new
npm run start
chrome://extensions
in the browser and enable 'developer mode'
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
./angular/src/manifest.json
npm run build:production
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
Run: npm start
Go to: Developer tools (inspect popup) => Sources => webpack
You can find your source files (TypeScript) over there.
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/
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
This folder contains the content page/service worker scripts and has its own package.json
to manage it's dependencies.