First, I want to thank Brad Traversy over at https://traversymedia.com for the inspiration on this small project. I don’t know Brad, but I think it is safe to say that he inspires lots of folks. I also hit up https://medium.com/@PardeepJain/build-your-own-chrome-extension-using-angular-4-ecedbd7404cc.
Okay…Sappy thank yous are out-of-the-way. Let’s get started.
I recently decided to take the plunge into Angular. Easy peasy, right? A visit to my favorite search engine returned results for AngularJS, Angular 2, Angular 3 (not released), and Angular 4 as of this writing. What a mess of information. Angular 4 is the winner. Although, note that if you are familiar with Angular 2 you are good to go.
I highly recommend the Tour of Heroes tutorial from https://angular.io/tutorial.
Here is where Brad comes in. I was watching a few of his tutorials on YouTube (https://youtube.com/user/TechGuyWeb/). I noticed how his browser start-up window displayed the time and a personalized greeting. I wanted in on this. So with a little searching, I found the Momentum chrome extension.
I’ve always wanted to create a Chrome extension of my own, but never took the initiative to get it done. I figured this would be a good option for a small Angular project.
First, let’s get an important piece of the SDLC out-of-the-way. Requirements! I only had a few.
- Display a high-quality image as the background.
- Display the current time.
- Display an appropriate greeting depending on the time of day.
CHROME EXTENSION 101 – VERY BASIC EXTENSION
I searched for Chrome extension examples. I found that extensions need at least three files: HTML, manifest, and an icon (gets displayed next to the URL address bar). I found a sample extension that came close to what I wanted – https://developer.chrome.com/extensions/samples#search:blank
The HTML was fairly straight forward.
https://developer.chrome.com/extensions/examples/api/override/blank_ntp/blank.html
<html> <head> <title>Blank New Tab</title> <style> div { color: #cccccc; vertical-align: 50%; text-align: center; font-family: sans-serif; font-size: 300%; } </style> </head> <body> <div style="height:40%"></div> <div>Blank New Tab™</div> </body> </html>
Same goes for the manifest.json file. I just updated the values to match my wants.
https://developer.chrome.com/extensions/examples/api/override/blank_ntp/manifest.json
{ "name": "Hello, World", "description": "Override the new tab page with a warm welcome for the world.", "version": "0.1", "incognito": "split", "browser_action": { "default_icon": "icon.png" }, "permissions": [], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "web_accessible_resources": [ "assets/img/*" ], "chrome_url_overrides": { "newtab": "index.html" }, "manifest_version": 2 }
I popped those into a directory. Here’s what that looks like.
C:\Projects\Test
+ index.html
+ manifest.json
+ icon.png
I chose to use a png from flaticon.com.
Next, browse to chrome://extensions/ in Chrome.
Check the Developer mode check box.
Press the Load unpacked extension… button.
Select the extension directory.
Click OK.
Your new blank tab extension will be available to use now. Open up a new tab and check out your progress!
VERY BASIC ANGULAR SETUP
We are going to need a couple of things to get going.
- https://nodejs.org/ – Grab the latest version. It should include the Node Package Manager (npm).
- https://cli.angular.io/ – This will make your Angular life a bit less stressful.
- https://code.visualstudio.com/ – Free and powerful code editor.
Let’s use the Angular CLI to stub out a new Angular project. Open up the Command Prompt and cd to the C:\Projects directory.
Type ng new Extension
This command will create all the necessary files for an Angular project.
Now that the project is set up, cd to the Extension directory.
Type ng serve
This will deploy a working version of the application that can be accessed at localhost:4200
THE APP IS TAKING SHAPE
Let’s see if we can meet our first requirement – Display a high-quality image as the background. I have found that pixabay.com is a great place to find high-quality creative commons pictures. I searched for a beach image. Find one you like.
Save it to a new assets\img directory. C:\Projects\Extension\src\assets\img
Let’s take a look at the generated index.html file.
[code lang=”html”] <!doctype html><html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Example</title>
<base href=”/”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
</head>
<body>
<app-root></app-root>
</body>
</html>
[/code]
Nothing to do here unless you want to change the.
The next steps will give us a browser window with a full-size background that scales with the viewport size. This code comes directly from Brad’s video – Easy Fullscreen Landing Page With HTML & CSS (https://www.youtube.com/watch?v=hVdTQWASliE). I highly recommend checking it out. He gives you a detailed explanation of how to use flex styling.
Open the styles.css file next, and put the following code:
[code lang=”css”] *{margin: 0;
padding: 0;
}
body {
margin:0;
font-family: Arial, Helvetica, sans-serif;
/* The color may need to change depending on your background image. */
color: #011A33;
font-size: 300%;
line-height: 1.6;
}
[/code]
Next open replace the code inside of the app.component.html with the following:
[code]
<div id=”showcase”>
<h1>{{time}}</h1>
<h3>{{greeting}}, {{name}}.</h3>
</div>
[/code]
Here we see a few things happening. The div is styled. The styling will give us the full-screen image we want. We also see to expect to have three values passed into the component. Let’s take a look at the styling first.
Open the app.component.css file and place the following code in it:
[code]
#showcase{
/* I saved my image as balance.jpg. Replace this with your image file name. */
background-image: url(‘../assets/img/balance.jpg’);
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 3.3em;
}
[/code]
We’re getting close. One last file to set up. Paste the following into the app.component.ts file:
[code]
import { Component } from ‘@angular/core’;
import ‘rxjs/add/observable/interval’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
name: string = “World”;
time: string;
interval: any;
greeting: string;
getTime(): void {
this.interval = setInterval(() => {
var hour = new Date().getHours();
this.getGreeting(hour);
//drop the :seconds & AM/PM
this.time = new Date().toLocaleTimeString().replace(/:\d+.[A-Z]{2}/, ‘ ‘);
}, 1000);
}
getGreeting(hour: number): void {
if (hour >= 4 && hour <= 11) { this.greeting = “Good morning”; } else if (hour >= 12 && hour <= 17) {
this.greeting = “Good afternoon”;
} else {
this.greeting = “Good evening”;
}
}
ngAfterViewInit() {
this.getTime();
}
}
[/code]
THE APP COMES TO LIFE
You should see something like this when you take a look at the browser.
Pretty sweet stuff!
NOW THE EXTENSION
We hit the requirements. We have most of what we need for the extension now.
Stop the built-in server – Ctrl + C
Type <code>ng build</code>
This will create a dist directory with the bare necessities.
Copy the manifest.json and icon files from earlier into this directory.
Next, browse to chrome://extensions/ in Chrome.
Make sure to check the Developer mode check box.
Press the Load unpacked extension… button.
Select the dist directory.
Click OK.
[bctt tweet=”How To Build A Chrome Extension With Angular 4″ username=”eterry28″]