DEV Community 👩‍💻👨‍💻

Cover image for Adding an Angular 9 Project as a Chrome Extension in 10 minutes
John Peters
John Peters

Posted on

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

  • 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
   ],
Enter fullscreen mode Exit fullscreen mode
  • 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"

    }
}
Enter fullscreen mode Exit fullscreen mode
  • Type in ng build
  • Type in chrome://extensions in Chrome
  • Click Load Unpacked

Alt Text

  • 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...

Alt Text

✔️ That's pretty cool in my opinion! It's definitely a way to get interested in learning Chrome Extension internals!

developer.chrome

JWP 2020 Angular Chrome Extension

Top comments (0)

🌚 Life is too short to browse without dark mode