Creating a Ribbit Chrome Extension
A couple of weeks ago, I previewed a Chrome extension using Ribbit technology to allow a user to make 2-legged call or send text messages. In this post, I'm going to show you some of the code powering the extension and how you would deploy it to the Chrome Extension Gallery.
Chrome extensions leverage CSS, HTML, and Javascript to extend the capabilities of the browser. As a HTML5-compliant browser, extensions can use localStorage to store data and can play audio or video without the need for a plugin.
Some Terminology
Let's start with a little terminology. In addition to bookmarks, events, tabs, windows, and themes that most browsers have, Chrome introduces a couple of new concepts for extensions:
Browser actions are little icons that live in the Google toolbar just right of the address bar. They can have a popup web page that appears when a user clicks the icon and a tooltip to describe what the extension does. To provide limited information to the user without opening the popup page, you can also set text to appear as badge over the icon. We'll be using a browser action for our extension.
Options pages give users a single place to customize your extension. We'll be using the options page to set the developer portal credentials and the default phone number you'll want to ring.
Content scripts can rewrite, style, or otherwise manipulate the content of a web page using Javascript. If you are familiar with Greasemonkey for Firefox, content scripts function the same way. You can set the script to affect pages from a specific domain, subdomain, or on all pages.
Background pages bring a stateful experience to a generally stateless Internet. For example, if you were developing a Twitter extension, you would initiate the connection to Twitter from the background page and, with the help of a timer, periodically check Twitter for new messages. For a Ribbit extension, this would be where you would check for new voicemail messages.
Manifest files provide basic information about the extension noting whether the extension will use browser actions, content scripts, an options page, and what permissions are required.
Getting Started
First we'll need to create an empty directory to hold all files for your extension. Let's call it lilypad. The only requirement is that the manifest file be in the root directory. You are to organize your files in anyway way you see fit. To keep things sorted, let's create images, css, and js folders for our images, stylesheets, and javascript files respectively. The first thing we'll need to create is out manifest file:
{
"name": "Lilypad for Google Chrome",
"version": "1.0",
"description": "Enables the use of Ribbit VOIP and SMS services.",
"icons": {
"32" : "images/ribbitR_32x32.png",
"128": "images/ribbitR_128x128.png"
},
"permissions": [],
"browser_action": {
"default_title": "Ribbit Lilypad",
"default_icon": "images/ribbitR_19x19.png",
"popup": "popup.html"
},
"options_page": "options.html"
}
In the snippet listed above, we are telling Chrome what name and icons to show the user when they install the extension, that we want a browser action to display the contents of popup.html, and that we will be setting application options and settings in the code of options.html.
- jwill's blog
- Login or register to post comments
-
