Build your own Chrome Extension - 1

When you visit a web page on the internet, it is possible that you find that the page lacks some features that you would like, or may be it has unnecessary features that you don't want, or even may be some features may be better off with some tweaks. In any case, a browser extension can manipulate html elements on the page to give you a better user experience.

In this article, we will discuss about one of the main components of a simple chrome extension, the manifest.

Manifest

This is the heart of an extension. In every chrome extension, we must have a "manifest.json" file which declares the important configurations of the extension such as the browser action, background scripts, permissions, web-accessible-resources etc. Let's look at a sample file and the description of few of several such basic sub-components of the manifest.

{
  "manifest_version": 2,
  "name": "myFirstExt",
  "description": "This is my custom Chromium Extension",
  "version": "1.0",
  "permissions": [ "webNavigation", "activeTab" , "tabs", "http://*/*"],
     
  "browser_action": {
   "default_icon": "myIcon.png",
   "default_popup": "main.html"
  },

  "background": {
    "scripts": ["background.js"]
  },
  "web_accessible_resources": [
    "anImage.png" , "anotherImage.png" , "anHTML.html"
  ],
  "content_scripts":[
   {
      "css": ["myStyle1.css","myStyle2.css"],
      "html":["myHTML.html"],
      "js":["myScript.js"]
   }
  ]
}

The first four configurations, manifest version, name, description, and version are not much of importance. All of them have their general meaning.

Permissions

While extensions allow you to do anything you want to the web page, they carry a similar amount of risk of privacy. A third person can use the extension to steal your private data. The only way to control this is through this configuration.

In other words, some actions can be performed by the extension only if the corresponding permissions are declared here. The user who installs the extension can identify which permissions the extension requests. Hence, privacy concern is taken care of.

Browser Action

Usually an extension has a popup menu associated with it. It appears when you click on the extension icon shown near the action bar of your browser. In chrome, this popup menu is a web page. When you click on this button, the html page declared in the manifest will appear here.

Background Pages/Event Pages

Sometimes, you need some script to run all the time from behind. This can be of great use when you want to selectively modify a web page depending on the elements of the page.

Also, whenever a page wants to communicate with the extension, these pages are needed.

Note - Background pages and Event pages are similar, but event pages are preferred. Event pages are a replacement provided by google for background pages.

Web Accessible Resources

If you have resources such as images to be added to a web page, then you need to declare them under this section. However, it is possible to use them within the extension page without declaring here(eg- in the page declared in browser action).

Content Scripts

One of the key concepts behind chrome browser is that, each tab is a different process. Similarly the extension is also like another separate web page. In short, communication between the extension and the tabs must be explicitly provided by the developer.
If you want to have some JavaScript code to manipulate HTML elements on a web page, you can use this concept of content scripts.
When you navigate to a webpage, the content scripts declared in the manifest will be injected to that web page automatically. Then they become a part of that page. However, there is another way of injecting scripts and styles, called programmatic injection.We will discuss it later, as it is not a part of the manifest.

Summary

We have described only the basic and most popular configurations of the manifest. There are, usually, other configurations that you need to declare in this manifest, if you are doing something "big" with your extension.

Now as we have understood the basics, we can go ahead and write our first chrome extension, within 10 minutes, guaranteed.

Was this article of any use to you? Share your thoughts as comments :)

SimplifyCS