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.
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.
angular-cli.json file should look something like this:
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.
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