DEV Community

Volodymyr Yepishev
Volodymyr Yepishev

Posted on

Turn Angular application into Chrome extension

#angular #tutorial #chrome #extension

It's pretty easy actually, this is going to be a short one.

Step 1: create Angular application (duh), i.e.

npx @angular/cli new angular-chrome-extension
Enter fullscreen mode Exit fullscreen mode

Step 2: add a manifest file to the source folder:

{ "manifest_version": 3, "name": "My App Extension", "description": "A basic chrome extension built with Angular", "version": "0.1", "action": { "default_popup": "index.html", "default_title": "Open the popup" }, "content_security_policy": { "script-src": "self", "object-src": "self'" } }
Enter fullscreen mode Exit fullscreen mode

Step 3: add the manifest file to the build assets in angular.json:

"architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { ... "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"], ... },
Enter fullscreen mode Exit fullscreen mode

Step 4: build

npm run build
Enter fullscreen mode Exit fullscreen mode

Now you have an unpacked Chrome extension in dist/angular-chrome-extension, which you can load with developer mode on, enjoy :)

P.S. repo with code

Top comments (0)