Turn Angular application into 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

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'"
  }
}

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"],
            ...
          },

Step 4: build

npm run build

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