How to build a Chrome Extension



Chrome extensions are really cool. They allow the user to extend the capabilities of their browser and can incorporate really well into existing apps. So let’s take a look at how to build a Chrome Extension in less than 10 minutes. Chrome Extensions are written in Javascript, so I recommend that you have a basic understanding of Javascript before proceeding with this tutorial.

What we’re building

We are going to build a simple chrome extension that will allow you to search google for any text that you highlight on a page.

Manifest

The first thing that you need to do is create a file call manifest.json. At the very minimum, every Chrome extension requires a manifest file. This file will tell Chrome the basic information of your app, including its name, version, and required permissions.

There are two types of applications you can build. Event pages or Content Scripts. Event pages are the extensions which are allowed to run in the background and are useful regardless of which page you are on. Content Scripts have limited access to the Chrome APIs but direct access to the web page you are viewing. You would want to use this for an extension that only makes sense for a particular website.

Below is my Manifest.json

{
    "name": "Getting Started Example",
    "version": "1.1",
    "description": "Build an Extension!",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": false
      },
      "browser_action": {
        "default_popup": "main.html"
       },
       "permissions": [
        "contextMenus"
       ]
    
}

A couple of things to point out:

Background

Because we are creating an extension that runs in the background, we are declaring the files we will need. In this case, we have one script which we will call background.js. We are setting persistent to false because we do not need it to be running constantly, only when the action is launched by the user. This allows any memory allocated by our extension to be freed once it’s done its task.

Browser Action

So you know that small window that appears when you click a Chrome extension? That is a browser action. Think of the browser action as creating the UI elements which the user sees. We are using the deafult_popup property to specify an HTML file to display when the user clicks the icon. Further, we can customize the app icon and title using the browser action. Keep in mind that this is not a required property. So you don’t need to have any type of HTML or UI for your extension.

Permissions

These are the permissions that you are requesting from the user. This will change depending on the context of your application. For this application, we are going to be adding something to the context menu.

Background.js

Okay, let’s get to the actual meat of our application. Here are the contents of my background.js

function search(info,tab) {
    chrome.tabs.create({  
      url: "http://www.google.com/search?q=" + info.selectionText,
    });           
  }
  
  chrome.contextMenus.create({
    title: "Give me something good", 
    id: "some-command",
    contexts:["selection"], 
  });

  chrome.contextMenus.onClicked.addListener(search);

This is pretty self-explanatory. We are creating a context menu item with the title Give me something good. We have to specify some arbitrary value for the id. For the context, we are handling the selection (text selected). You can also handle different contexts like image links.

Finally, we add an onClick listener that triggers the search function. Within that function, we create a new tab to Google search the text that was selected.

Default_Popup

So we really didn’t need to add this, but let’s do it anyway. I created a simple HTML file with the displays a simple message. Again, this is not necessary.

Loading the Extension into Chrome

To load your extension into Chrome, go to chrome://extensions/ in the address bar. Make sure developer mode is selected then go to load unpacked extension. From there you can select the folder with your extension. Then it will be loaded.

When you highlight some text, you should not get an option to “Show me something good.”

You can view the code on GitHub