Google Chrome

Developing a simple extension for Google Chrome

imageBrowser’s extensions are very popular nowadays. There is always a reason to write any extension.

This article will tell how to write a small extension for Google chrome for a personal use. A purpose of the article to help a young programmer to write an extension.

Let us start!

We approximately know what manifest.json is all about and what for it is needed. In short, this is the basic extension file, which informs the browser what things will be used by an extension and the main parameters (name, description, etc.).

Let us move on directly to an extension.
This is a simple script that deletes those posts that prevent us to look for interesting posts from the freelance page (if we are looking for the long-term projects). This is an addition to the existing built-in filter.

"name": "Ffilter",
"version": "1.0",
"background_page": "bg.html", // name of the background page.
"icons": {
"48": "icon_48.png",
"128": "icon_128.png"
"page_action": { // action for the current page
"default_title": "Ffilter",
"default_icon": "icon_19.png",
"default_popup": "popup.html" // name of filter’s page
"permissions": [
"tabs", " *"
"content_scripts": [{ // work with the page's DOM of freelance.
"matches": [" *"],
"js": ["jq.js", "script.js"]

Let us have a good look at
Name and a version – it is all clear for evrybody.

imagebackground_page - there should be a name of the background page. Background page is a very important element, although it is not required for some applications. But in our case it is absolutely necessary.
Background page always works when is running the extension (i.e., when it is enabled). It is always one and it can communicate and control all the other elements.

Icons are need of different sizes to be displayed in the address string in the list of extensions near the address string.

page_action is an important object. It informs the browser that extension will be individually for each tab i.e., the icon will be displayed in the address string (like gmail checker). Such extensions as gmail checker are not considered as individual, they open up once for the entire browser (browser_action is used instead of the page_action object in the manifest; let us look at pictures below).


default_title, default_icon are name and icon respectively.
default_popup is a name of the html-page extension, which will pop up when you click on the icon.

permissions is an array with extensions. It is useful to communicate with the system object tabs and to refer to the freelance address (that means js work with the page and not ajax queries).

content_scripts is an important object that namely permits to use js on the freelance page. We specify the address of the page and js-files, which will be executed immediately after loading the body. jQuery can be used to define the functions. The order is important.
It is important to know that the extension scripts cannot see objects / variables of scripts of the page itself. This means that if the page already has its own jQuery, we cannot use it, because we should download own. This is called isolated worlds and sometimes it is convenient. Of course, the scripts from the extension can manipulate DOM.

Our extension consists of 3 main objects: the background page (one for all), a window with a filter (for each page) and the scripts on each page.

The general algorithm is as follows:
The filter should only communicate with the script on the current page. The script should only accept instructions from the filter on the current page and execute them. Both of them should not communicate with the background page, but the background page should control the filter. After all, the filter should only appear on the page of freelance. The extension default page_action is always hidden and it should be enabled through a background page, it is done when freelance’s page is downloaded.


chrome.tabs.onUpdated.addListener (function (id, info, tab) {
if (info.url)
if (/ (info.url)) (id);

chrome.tabs is a system object, which has used the most and it is responsible for the tab.

We hang our function in the event onUpdated (tab update and follow a link). As parameters come a tab identifier, information about the update and the object of tab itself. We need information - it contains the address of the current page. We check whether this is a freelance and if so the object chrome.pageAction is called the show method passing there the ID of the tab.

chrome.pageAction is the object that is responsible for the extension inside of the address string and we ask to show us the proper icon in the tab (where just has opened a freelance).

All actions of the background page finished, the site is opened and the icon appeared; now we can click on it and will appear popup.html.


It makes no sense to parse all the code, it is important to know just how to refer to the script from this window that is waiting on a page.

In general, the documentation offers this way:

chrome.tabs.executeScript (null, {code: "alert ('hello !')"});
or it could be as follows:

chrome.tabs.executeScript (null, {file: "script.js"});
imageBut how does string’s parameters pass there? (null - means that we want to execute script in the current tab)
Here is the way how to do it, which was hidden in the documentation.
port is a special object in chrome, which helps communicate from the script to the background page and the popup, or from the background page and the popup to the script.

In order to connect to the script, it needs to be done through the tabs:

var port = chrome.tabs.connect (id);
where is id number of the desired tab with the script, port is the returned object.

In order to connect to a background page or popup, it is needed to refer to the object extension:

var port = chrome.extension.connect ();
Extension is one - the identifier should not be specified.
Listen to these connections we can equally here and there:

chrome.extension.onConnect.addListener (function (port) {
port.onMessage.addListener (MyFunc);

Why will onMessage become clearer later?

Let us get back to popup.html.
At this point, we can connect with a script that is "stays" on this page.
It could be a problem that we needed to specify the identificator of the tab, because we do not know this id. So we can try to do something like this: (function (w) {
chrome.tabs.getSelected (, function (t) {
port = chrome.tabs.connect (;

We ask to indicate, which window is active and we get back a window object in the callback. Next, we ask to indicate the current tab in this dialog box and we also get it back in the callback. Only then we open the connection with the script.
It works, but it is wrong, because there should be easier way.

When all the data of filter is collected at the touch of a button we will send object to this port with the help of this method:

port.postMessage (obj);
At this point script.js starts working

In script.js is important:

chrome.extension.onConnect.addListener (function (port) {
port.onMessage.addListener (Filtr);

Let us listen to the port and wait for an incoming connection with an object port.
This object has an event onMessage. We hang our function Filtr, which will take all the arguments that will be sent by port.postMessage () on the other end. Filtr will delete all posts that are listed in the object.

That is all

It works and helps to find the work to earn some money.

Siera 13 november 2011, 15:22
Vote for this post
Bring it to the Main Page


Leave a Reply

Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute