Building a chrome extension with angular
You decided you want to incorporate angular inside your chrome extension, well you are at the right place
let me show you how to do this with just a few steps.
Let’s create an angular project
$ ng new angularChromeExtension
Once we generate our project I’m going to change some stuff in the app.component.html file (just for the sake of it not being the default template)
I removed some HTML and I’m left with this (inside app.component.html)
Now we are “done” with our angular app and we will build it
$ ng build
After we build our app there will be a new dist folder added in our root directory
from here we will create a new file manifest.json inside the dist directory.
This manifest.json is the template file for chrome that will tell chrome that this is a chrome extension and it contains a bunch of options see below:
Important here is the browser_action here we setup a popup for our app. In addition browser action can also have a tooltip, a badge, and icons property.
In order for angular to work as extension we have added this
to our content_security_policy, if you check out chrome docs they quote that using unsafe-eval is not a good idea because your app might be vulnerable to XSS attacks.
So now that we have our manifest done it’s time to load our app in chrome.
Go to Menu -> More Tools -> Extensions
Here activate the developer mode and click load unpacked, navigate to the root directory of the dist folder and you are done :).
Finally we have our anuglar app running as a chrome extension.