Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

chrome-swiss-army

Create Your First Chrome Extension Using Skills You Already Have

Introduction

As a web developer you’ve inevitably come across situations in which a tool does not exist to assist you with a particular task. The thought of developing your own solution is enticing, especially if it gives you a chance to use a technology you’ve been interested in learning. Unfortunately it’s easy to dismiss implementing your own solution because of uncertainty in the amount of overhead that may be involved. That’s where Google Chrome Extensions come in.

A Chrome Extension is a small program that runs from the Google Chrome browser. Developing a Chrome Extension involves a very minimal amount of overhead and mainly relies on your ability to utilize HTML, CSS, and JavaScript to create a functioning web page.  As a web developer that’s great because it means you’re already well versed in creating Chrome Extensions…at least almost. This article will help you bridge the gap with the knowledge I picked up when turning a useful idea into my first Chrome Extension.

My First Chrome Extension

I was tasked with creating a single page application for Tallan’s employees to quickly manage their daily time and expense entries. A snapshot of my Chrome Extension is shown below. Note that my extension is able to be launched from the browser’s toolbar and provides a popup window for the application.

extension-overview

This application communicates with a RESTful API and was written using Bootstrap and AngularJS. As promised nothing out of the ordinary was done to create this tool. However, there are some Chrome specific details that I ran into that you should be aware of:

  1. Initial Project Setup
  2. Debugging Your Extension
  3. Being Clever with UI Real Estate
  4. Utilizing Chrome’s JavaScript APIs
  5. Publishing Your Extension

Initial Project Setup

chrome-project-structure

In order to locally test and eventually publish your extension you are going to need to structure your project files in a particular way. To begin with, the root of your project’s file structure must be a folder named app; it needs to contain all of the files you use to run your extension. Along with these you must also include a manifest.json file which will contain the metadata the Chrome browser will need to run your extension. My manifest file is shown below, note that for my application’s functionality there wasn’t all that much to include.

{
 "manifest_version": 2,

 "name": "Tallan Time-Keeper",
 "description": "Chrome extension that allows input of time and expenses into TASS",
 "version": "3.0.0.0",

 "permissions": [
    "http://homedev.tallan.com/*",
    "downloads"
 ],

 "browser_action": {
    "default_icon": "img/tallanlogosmall.png",
    "default_popup": "index.html"
 }
}

All of the necessary information that you’d expect is included here like the extension’s name, description, and version. There is also a section for the extension’s permissions; this is where you specify the URLs that the application will be communicating with and the Chrome specific actions that the application will need to perform.

On line 9 I specify the root address of the API endpoints that my application communicates with. On line 10 I specify that my application will need to download files to the user’s computer via Chrome. It’s important to note that Chrome will actively block my application from performing these functions without including these permissions.

The manifest.json file also needs to tell Chrome what type of extension our application will be. There are two types to choose from, Page Actions and Browser Actions. Google defines Page Actions as extensions that are made to perform actions on specific pages. Icons for these extensions appear within Chrome’s address bar and are only active on pages specific to the extension. Browser Actions instead are extensions that perform actions that aren’t specific to any pages in particular. These appear as icons that are always enabled in Chrome’s tool bar.

My tool is a ‘Browser Action’ extension since it is not reliant on any web page whatsoever. To officially declare it as this type I’ve added the ‘browser_action’ object  to my manifest on line 13. The ‘default_icon’ property within this object is used to declare what image you want to use as an icon to launch the application. When the application launches, Chrome renders the page assigned to the ‘default_popup’ property in this same object.

Pending on what your application needs to do you may need to add more to the manifest.json file than what I covered. To view the full extent of what you can add view Google’s Documentation.

Debugging Your Extension

Once you’ve finished the initial setup you’ll want the ability to run your application locally during development.

To do this:

  1. In the Chrome browser navigate to chrome://extensions in the address bar
  2. On the Extensions page make sure the Developer Mode checkbox is checked
  3. Click the Load unpacked extension… button
  4. In the dialog box that appears, select the app folder for your application and click OK

load-unpacked-extension

You should now see an icon for your application in the browser’s tool bar (the Tallan icon in my application). Clicking on the icon should open a small pop up displaying the start-up page specified in your manifest.json file.

launch-icon

Just like debugging any other web page in chrome you can right click on your extension’s pop up window and open up the developer tools. Note that as you make changes to your code you will need to close and re-open the application for changes to take effect. However if changes are made to the manifest.json file you will need to manually reload the application in Chrome. To do this, navigate back to chrome://extensions find your unpacked extension in the list of extensions and click ‘reload’.

unpacked-extension-details

Being Clever with UI Real Estate

tetris

Before doing wire frames for your application you should consider the fact that the extension’s pop up window can be no more than 800px wide and 600px tall. If you style your application to exceed these dimensions, Chrome will not allow it and will add scroll bars to your pop-up.

Although 800px by 600px is a small space to work with there are a lot of clever ways to work around it. Because I wrote my application in AngularJS I was able to maximize productive space with accordions and tab structures offered by UI Bootstrap. Bootstrap’s website also provides a means of creating your own modified version of their framework to fit your application’s particular needs. I used their tool to reduce my application’s font sizes, margins, and padding.

Utilizing Chrome’s JavaScript APIs

item-box

It’s worth noting that Chrome offers quite a bit of power over the browser that you can utilize in your extension.If you wanted to execute some logic at a scheduled time in your extension, you can utilize the ‘chrome.alarms’ API. If your application pulls down files from some API and you’d like to offer users the ability to save the files, you can use the ‘chrome.downloads’ API. These are just a few examples of what Chrome allows you to do.

Looking through all the functionality offered by Chrome’s JavaScript APIs during the design of your application can save you time and could be the difference between a good extension and a great one. Be aware however that some APIs like ‘chrome.downloads’ will require you to add an additional permission to your manifest.json file in order for Chrome to allow it to function.

Publishing Your Extension

When you’ve completed your extension you don’t necessarily have to publish it. If you prefer that your extension remain a personal tool then no worries; you can continue to run it locally in Developer mode as you did during development. However if your tool is aiding you with a common task that others frequently perform, you may want to consider publishing. I decided to publish my extension to the Chrome Web Store because it helps me with a task that all Tallan employees need to perform daily. As a result my colleagues are able to install their own copy and conveniently receive software updates automatically as I push them out.

The first requirement to publishing an extension is having a Google account. If you don’t have an account you will need to create one. Once you’ve logged in you will need to navigate to your Google Developer Dashboard. This is where you will see all of your uploaded applications and their various statuses; below is an image of my dashboard.

developer-dashboard

Assuming that this is your first time publishing an application on the Chrome Web Store, you will likely see the following message at the bottom of your developer dashboard.

developer-registration-fee

Google requires that you pay a one-time registration fee in order to publish up to 20 items in its Web Store. Once you pay the fee and it is processed you will be able to continue with publishing your extension. On the dashboard click on the Add new item button to start the process.

upload-extension-file

The following screen will ask you to upload your extension as a zip file. What this specifically means is that you should upload a zip file that only contains your app folder.

Before you create this zip file note the following to save yourself some headaches:

  1. Chrome will not minify your code for you
  2. At minimum start the version number in your manifest.json file at 1.0.0.0
    • Every time you attempt to publish your extension you will need to increment the version
    • With bug fixes and unsuccessful publishing attempts you may quickly roll over to the next major version number.
      • This is undesirable as it could be confusing to your users.
  3. The Chrome Web Store is temperamental about what you include in your app folder
    • Chrome will reject publishing your extension if it deems its contents suspicious
    • Look through and remove all unnecessary files in your included Bower/npm packages to avoid this
      • Compressed files, video files, etc.

Once you’ve uploaded your zip file you’ll be brought to a page where you can manage web store options for your extension. One of the most important options you can set on this page is the level of visibility you want for you extension in the Chrome Web Store. Since my application is only useful for users with Tallan credentials I chose the Unlisted option. With this option my application won’t show up in the Chrome Web Store but I can share my extension with my colleagues by emailing them a link to the extension’s page.

visibility-options

Once you’re satisfied with all the various options, you can then click Publish Changes at the bottom of the page. It may take up to a day for Google to review and complete the publishing process. As stated before you can check the status of your extension by looking at the Developer Dashboard. If it successfully publishes, users can start installing your extension. If it is rejected you should receive an email in your Google account providing some hint as to why and how you can correct it.

_________________________________________________________________________________________

To learn more on how Tallan can help your organization with all of your Custom Software Development needs, CLICK HERE to check out our website!

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\