Building a chrome extension with angular

2018-09-24

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

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
15

{
        "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 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.

• #angular
• #chrome