Building a chrome extension with angular

You decided you want to incorporate angular inside your chorme 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

1
$ 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)

1
2
3
4
5
6
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

Now we are “done” with our angular app and we will build it

1
$ 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:

1
2
3
4
5
6
7
8
9
10
11
12
{
"manifest_version": 2,
"name": "Angular Chorme Test App",
"description": "extension desc",
"version": "1.0",
"browser_action": {
"default_popup": "index.html"
},
"permissions": [],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

}

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.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "Angular Chorme Test App",
...
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Angular Title", // optional; shown in tooltip
"default_popup": "index.html" // optional
},
...
}

In order for angular to work as extension we have added this

1
'unsafe-eval'

to our content_security_policy, if you check out chrome docs they qoute 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.



Share