How to build a Chrome extension, Part 4: Background pages and scheduling requests

One of the most common uses for an extension is as a notifier. For example, the Google Gmail Checker, an official Google extension and the most popular one in the gallery, constantly checks your Gmail inbox for new unread mail.

This functionality is easy to add into your own extension. You need to add a background page, which is easily added by adding the background_page option to your manifest.json:

{
	"name": "My Extension",
	...
	"background_page": "background.html",
	...
}

Like almost every other component in a Chrome extension, background.html is a standard HTML file. However, it can also do things most web pages cannot, such as cross-origin requests if permissions are correctly added to the manifest. For example, if your extension is a Gmail checker, it would need permissions to http://www.google.com and https://www.google.com. To add these permissions, the manifest.json would be edited to:

{
	"name": "My Extension",
	...
	"background_page": "background.html",
	"permissions": ["http://www.google.com/", "https://www.google.com/"],
	...
}

A background page runs at all times when the extension is enabled. You cannot see it, but it can modify other aspects of the extension, like setting the browser action badge. For example, the following example would set the icon badge to the number of unread items in a hypothetical service:

function getUnreadItems(callback) {
	$.ajax(..., function(data) {
		process(data);
		callback(data);
	});
}

function updateBadge() {
	getUnreadItems(function(data) {
		chrome.browserAction.setBadgeText({text:data.unreadItems});
	});
}

So now you can make a request, but how can you schedule it so the data is retrieved and processed regularly? Luckily, JavaScript has a method called window.setTimeout to do just that:

var pollInterval = 1000 * 60; // 1 minute, in milliseconds

function startRequest() {
	updateBadge();
	window.setTimeout(startRequest, pollInterval);
}

That was easy! Now just slap a

onload='startRequest()'

on the background page’s body tag and that should do it!

But what if you want to stop the request? That can easily be done as well, by chaging the startRequest function a little and adding a stopRequest function:

var pollInterval = 1000 * 60; // 1 minute, in milliseconds
var timerId;

function startRequest() {
	updateBadge();
	timerId = window.setTimeout(startRequest, pollInterval);
}

function stopRequest() {
	window.clearTimeout(timerId);
}

And that’s about it on building background pages that can schedule requests. Now go! Make an awesome notifier! You can even make things like a timer with this (Facebook addiction control, anyone?). Just remember to leave a comment telling everyone of your awesomeness.

  • Max

    Muy bueno Juliana! hice mis primeras extensiones gracias a vos!

    una consulta,

    hice una extensión a la plataforma “mobile” de un proveedor mio… funciona todo ok, pero cuando el popup se cierra pierde el login y tengo que tipear nuevamente usuario y clave!

    se puede solucionar de algún modo?

    mil gracias y saludos desde argentina!

  • Sí, este es un problema que he encontrado en el sistema de popups: se vuelve a cargar la página desde cero cuando se cierran, perdiendo cualquier sesión en la página y sus frames internos.

    Una opción que intenté fue mirar la dirección del iframe cuando se cerró la página, guardarla en localstorage, y luego cargar el iframe con la dirección guardada. Sin embargo, esto no se puede porque el iframe está en un dominio diferente y el navegador no permite acceder al documento en él por seguridad (prevenir cross-site scripting). Incluso poniendo permisos al dominio del iframe en el manifest.json no permite esto.

    Si encuentras alguna solución a esto, porfa avísame.

  • Max

    Gracias!

    Mira esta para yahoo mail:
    https://chrome.google.com/extensions/detail/ope

    funciona!

    como o donde se puede ver el código de esa extensión?

    saludos!

  • Thanks for the article. I wonder if you could help a little.

    I want to have a simple Extension, that shows the number of new items in a RSS feed since the extension was clicked.

    It would poll every 2-3 mins for example and if the RSS feed is updated it should display a count of how many new items there are. I assume it has to set the setBadgeText field.

    Any help would be greatly appreciated.

  • Thanks for the article. I wonder if you could help a little.

    I want to have a simple Extension, that shows the number of new items in a RSS feed since the extension was clicked.

    It would poll every 2-3 mins for example and if the RSS feed is updated it should display a count of how many new items there are. I assume it has to set the setBadgeText field.

    Any help would be greatly appreciated.

  • Pingback: Extensiones de Chrome | Juan José Montes de Oca Arbós()

  • zjh

    Thanks for the article. It’s very useful for a new guy like me . Thanks!!

  • Alberto Sheinfeld

    Hola Juliana, gracias por este articulo, queria saber si sabias hacer que los scripts dentro del background_page se ejecuten cada vez que el browser carga una pagina nueva.

    Gracias!

    • En este caso, yo diría que uses un content script en vez de un background page: http://code.google.com/chrome/extensions/content_scripts.html Los content scripts son más limitados que el resto de una extensión, entonces tal vez tengas que hacer paso de mensajes a un background page para que haga las cosas más avanzadas.

    • En este caso, yo diría que uses un content script en vez de un background page: http://code.google.com/chrome/extensions/content_scripts.html Los content scripts son más limitados que el resto de una extensión, entonces tal vez tengas que hacer paso de mensajes a un background page para que haga las cosas más avanzadas.

  • Carolina Fernandez

    Hola! una consulta…al insertar este codigo en el “background” me da un error en esta linea
    “$.ajax(…, function(data) {“Me podrias ayudar a solucionarlo… hay que sustituir esos “…” por algo?

    • Por logica… El codigo javascript está mal. Porque?. cuando as visto … (tres puntos) juntos en una aplicacion?, sobre todo sin comillas.

    • Chickcr

      Yo se que los 3 puntos, por logica, estan mal….a lo que me referia es como se modifica ese espacio para hacerlo funcionar bien?…logicamente como diseñadora no tengo mucho conocimiento de codigo y estoy tratando de activar las notificaciones para una aplicacion que desarrolle para mi empresa.

  • djadmin

    Hey, It was great article.

    Could you help me with one module that i am working on. It is actually an automatic login system which will bypass the login page.

    Thank You

  • ShatUrdhaBriddha

    Excellent introduction! Really like it
    jnc@Kolkata

  • Arthur Accioly

    Hi Juliana,

    I’m trying to create actions in my emails so when I click there I can create a Jira ticket (executing a rest command). I’ve found this google chrome extension that is very similar (http://www.rightfile.com.au/actions-for-gmail/), with the difference that is not related to Jira. I’m wondering how they created this actions buttons in the emails. Can you show me how to do that?