Angular 6 and Ionic 4 Chrome Extensions

2 min readAug 10, 2018

With a majority share in the web browser space, it is no wonder that chrome extensions are being widely implemented. However, there is a trend of outdated and non functional web apps scattered throughout the chrome web store. For modern and sleek looking web components look no further than the newly update angular 6 and it’s cousin the mobile friendly ionic 4 framework.

Requirements:

Node.js (Latest)
Ionic 4 or Angular 6 CLI (Latest)
Chrome

If you have not already done so install the relevant CLI and create an Ionic or Angular project. For this guide I will be using Ionic 4 as an example.

npm install -g ionic
ionic start myApp tabs --type=angular

The next thing that we want to do is build the application to generate the /www folder inside your root directory.

ionic build

ng build

After we finish building let’s create a manifest.json file inside /www. You can also take a look at the docs, they will provide more details about the types of fields you can use inside the manifest file. https://developer.chrome.com/extensions/manifest

{
  "name": "Ionic 4",
  "version": "1.0",
  "description": "We built a Chrome Extension!","content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": "assets/icon/favicon.png"
  },
  "manifest_version": 2
}

Almost Done! Now we have to change some things inside www/index.html.

<!doctype html>
<html lang="en"><head>
  <meta charset="utf-8">
  <title>Ionic App</title><base href="/"></base><meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    body {min-width: 800px;
      max-width: auto;
    }html {
      min-width: 800px;
      max-width: auto;
      min-height: 600px;
    }
  </style>
</head><body>
  <app-root></app-root>
  <script type="text/javascript" src="runtime.js"></script>
  <script type="text/javascript" src="polyfills.js"></script>
  <script type="text/javascript" src="styles.js"></script>
  <script type="text/javascript" src="vendor.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body></html>

Finally to test the chrome extension we need to go to chrome://extensions/ and enable Developer mode. Afterwards, we click on Load Unpacked and load inside the /www directory.

Note: For those using auth0.js please add the following to your polyfills.ts

(window as any).global = window;

The full project is available on Github. Thank you for reading!

Angular 6 and Ionic 4 Chrome Extensions

Written by Ivan Systerov