Adding an Angular 9 Project as a Chrome Extension in 10 minutes

#angular #chrome

Create a new Angular Project.
Go to Angular.json file and set "aot" and "assets area" to look like this.

 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
   "outputPath": "dist/ngChromeExtension",
   "index": "src/index.html",
   "main": "src/main.ts",
   "polyfills": "src/polyfills.ts",
   "tsConfig": "tsconfig.app.json",
   "aot": true, <= // Make sure this is set to true
   "assets": [
    "src/assets/favicon.ico",
    "src/assets",
    "src/manifest.json" <= // Chrome manifest goes in root directory
   ],

Create a new manifest.json file in root

{
    "name": "Great Extension",
    "version": "1.0",
    "description": "Build an Extension with Angular",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"

    }
}

Type in ng build
Type in chrome://extensions in Chrome
Click Load Unpacked

Find your compiled dist folder and point there. Chrome will not allow the files to be displayed. No problem just let it use your dist folder.
Next, look for a small square green G icon next to Chrome's address bar on left. Click it...