Build a simple Emoji Chrome Extension with Angular CLI.

Josh Sommer
Apr 20, 2017 · 3 min read

Build a simple Emoji Chrome Extension with Angular CLI.

Building Google Chrome apps and extensions is surprisingly easy with the Angular CLI and Ahead-of-Time compiler. I’m going to show you how to get one up and running in just a few simple steps. Before you get started you will need to make sure you have the Angular CLI installed. More info on how to do that and about the CLI in general can be found at https://cli.angular.io/.

Setting up our Angular CLI Project

Create a new project with Angular CLI ng new Emoji-Clippy.

Adding the needed manifest file for Chrome Apps.

Add a manifest.json file under the src directory of your new Angular CLI project.

You will also want to add this as an asset in the project’s angular-cli.json file so that it is copied over in the dist folder when you build.

Your angular-cli.json file should look something like this:

angular-cli.json

Building our project with the CLI

From your command line, run ng build --prod --aot. This will build your extension with Angular Ahead of time compiler and output everything you need to the dist folder in your project.

Adding our new Chrome extension

In Chrome go to the Menu icon > More Tools > Extensions. Make sure the Development Mode check box is checked and then click Load unpacked extension. From the browser window, navigate to your projects Folder (Emoji-Clippy) dist Folder. You should now have an E icon in your browser that if you click on looks something like this:

Creating our clipboard list item component

Here we are going to create our List Item Component and add the emojis we want to be able to add to the clip board quickly. First step is to install the excellent Angular module ngx-clipboard that wraps clipboard.js. This will allow us to click a button and have the emoji we want to copy and paste. To install we simply need to run the npm install command,npm install --save ngx-clipboard. (If you find yourself inclined, go to ngx-clipboards Github page and star it https://github.com/maxisam/ngx-clipboard).

We will now want to create our list component. For the sake of brevity I’ve included the template and the styling all inline, but normally I prefer to have them in their own separate files.

Updating the project’s main app module.

Now make sure you’ve added your new component and the ngx-clipboard module inside of your app module. Which should look something like this:

Adding the emoji we want to list out.

Lastly, update your app.component.html to use the list-item component you created previously. And add as many emoji’s/words/ catch phrases as you’d like.

When you’ve added all the items you’d like, run ng build --prod --aot from your command line again. Once that is complete your extension button will be automatically updated to look like the beginning image. You will now be able to click on the emojis and have them automatically added to your clip board for quick responses.

Finally…

¯\_(ツ)_/¯

You can get the source code for this project at: https://github.com/TheOriginalJosh/Emoji-Clippy

For a great list of emoji, checkout https://github.com/dysfunc/ascii-emoji

Josh Sommer

Written by

Full Stack Web Developer, @angular aficionado, Father, Husband, Amateur a capella death metal singer, @Telerik developer expert #NativeScript.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade