Create your own browser extensions: Extend your tentacles to Chrome

Before you start

For this article, you will need to download and install Google Chrome V19 or later (this example is based on V19). You also need some tools that you can use to edit HTML, CSS, and JavaScript. It would be helpful if you had the experience of using chrome or Chrome extensions. Spend a little time browsing through the Chrome Web Store. Look at the extension provided and try it first, which will provide some background for this article.

Why build Browser extensions?

There are several reasons you want to build a browser extension, and the common application of browser extensions is to create an interaction between one browser and another application or service. Evernote, 1Password, and Adobe Shadow all do this, just like many other extensions. Or, you want to add some new features to a browser that lacks that functionality by adding developer tools or screenshots utility. Some developers write extensions for specialized purposes, such as sports scoring tracker, specific site enhancements, and weather forecasts. People can use extensions to do a lot of different things. What are you going to do?

What extensions do you want to build?

To demonstrate the build extension process in Chrome, you need to write an extension called Gawkblocker. Gawkblocker will allow you to lock down certain domains that you are trying not to access for various reasons. Gawkblocker contains the following components:

A pop-up window (showing the domain you are going to lock)

A visible browser icon (extended entry point)

An option page (configure which domain you want to lock and which you want to access)

In general, Gawkblocker will attach a listener to each tab or window, and the extension will compare URLs and lock the list of domains when the URL of the selected card changes. If the URL matches a locked field, the request is redirected to an extended page (see Figure 1).

Figure 1. Gawkblocker extension