Pero que hemos de hacer si queremos que el background.js se comunique con algún otro archivo js de nuestras extensiones? Podemos notificar a nuestro script mediante peticiones desde el background.js mediante la función sendRequest de la clase tabs.

Veamos un ejemplo:

chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {
            foo: 'foo'
        }, function(response){
            console.log(response);
        }
    );
});

La primera línea ejecuta un callback con la pestaña activa como parámetro.

La segunda línea es la que propiamente creará un request a los scripts que tengamos activos en la pestaña que le pasemos como primer parametro “tab.id” en el caso del ejemplo. Como segundo parametro podemos pasarle datos al script y como último parametro podemos pasar una función anónima de callback tal y cono nos especifica la documentación:

chrome.tabs.sendRequest(integer tabId, any request, function responseCallback);

Por el otro lado nuestro script integrado en la página deberá capturar nuestra petición de la siguiente manera:

chrome.extension.onRequest.addListener(function(request) {
    if(request.foo === 'foo'){
        // Ejecutamos lo que queramos
    }
});

Tal y como nos indica la documentación de la API

chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...});

Esto nos permite una comunicación de lado a lado en las extensiones de Chrome.

Tenemos diferentes formas de hacerlo, la mejor en mi opinión es mediante el uso de media queries, que nos permitirán cargar diferentes estilos en función del tamaño de dispositivo o de pantalla. Es bastante sencillo de realizar así que iré directamente a los ejemplos:

Supongamos que tenemos un elemento div de fondo negro que queremos que aparezca o no en función de el tamaño de dispositivos.

<div class='no-movil'></div>

En la hoja de estilos css lo definiríamos de la siguiente manera

@media(max-width:480px){
    .no-movil { display: none; }
}

Con esta sentencia no aparecerá en los dispositivos con la ventana del navegador con un ancho inferior a 480, pero si lo que queremos es que no aparezca en los dispositivos con ancho inferior a 480 deberemos realizarlo de la manera siguiente:

@media(max-device-width:480px){
    .no-movil { display: none; }
}

Por último me gustaría aclarar que también es posible cargar toda una hoja de estilos únicamente cuando se cumpla cierta condición.

Veamos el ejemplo de el código que insertaríamos en la cabecera:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="estilo480.css">

En esta entrada, hablaremos sobre como capturar las peticiones ajax o XMLHttpRequest para reaccionar sobre ellas de alguna forma en concreta, permitirlas, bloquearlas, etc.

Lo primero de todo es hacerle saber a nuestro fichero de manifiesto manifest.json que queremos utilizar las llamadas a la API de extensiones de Google Chrome encargadas de capturar las peticiones request. Estas son webRequest y webRequestBlocking (en el caso de desear bloquear peticiones ajax).

Dando permisos a la extensión

Obtenemos un manifest.json básico de ejemplo de la siguiente manera:

{
    "name": "Mi primera extensión",
    "version": "1.0",
    "manifest_version": 2,
    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "http://web.com/*"
    ],
    "background": {
    	"scripts": ["background.js"]
    }
}

Es importante recalcar que debemos de tener un script que correrá en background (en mi ejemplo llamado background.js) que se encargará de capturar las peticiones ajax.

Ahora debemos decirle a la extensión de chrome que escuche atentamente a cualquier petición de la página que estamos monitorizando que haga via ajax a algún servidor via nuestro archivo background.js

Capturando la petición

chrome.webRequest.onCompleted.addListener(function(details) {
    console.log(details); // Nos imprimirá los detalles de la petición
}, { urls: ["http://web.com/*"] });

De esta forma chrome quedará pendiente y cualquier petición que haga nuestra web host vía ajax, lanzará esta llamada. En este ejemplo en concreto, el evento se dispará al completar la petición, así lo indica “onCompleted”.
Si deseas capturar la petición en cualquier otro momento, podeis hacerlo. Sencillamente buscar los diferentes eventos que se disparan en la documentación de webRequest.

Ejemplo práctico: bloqueando peticiones ajax

Vamos a imaginar que queremos hacer una extensión que bloquee todas las peticiones a los servicios tusestadisticas.com para proteger la privacidad de los usuarios que instalen nuestra extensión.

Primero deberemos añadir una escucha al inicio de cualquier petición ajax y para las que sean a los servidores de tusestadisticas.com, bloquearlas.

Veamos…

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        return {cancel: details.url.indexOf("://www.tusestadisticas.com/") !== -1};
    }, {urls: ["*://*"]}, ["blocking"]
);

Como se puede apreciar, la API de webRequest nos da juego a muchas cosas. Ahora ya es sólo cuestión de probar y jugar.

Mas adelante veremos como se comunica el archivo background.js con nuestro script para avisarle y llamar funciones.

Aquí está la nueva entrada: Comunicación background.js y script en extensiones de Chrome

Cómo muchos de vosotros sabréis, llevo unos días peleando horas y horas con jQuery mobile para hacer una aplicación a nivel empresarial de gestión de pedidos que sea totalmente manejable desde dispositivos móbiles como iPhone, iPad o dispositivos Android así como a traves de web.

En cualquier caso, hoy me he encontrado que safari mobile, detecta ciertos datos como los teléfonos y las ¿fechas? (realmente no entiendo el porqué), como teléfonos y les añade un enlace automáticamente para poder realizar una llamada de forma cómoda. Podeis ver la imagen adjunta a la entrada donde se aprecia.

En fin, como siempre hay una forma de deshabilitar a nivel global en toda la página y es añadiendo la siguiente línea a la cabecera <head> de la web.

<meta name="format-detection" content="telephone=no">

Con esto será suficiente para deshabilitar la autodetección de teléfonos en nuestros iPhone e iPad (safari mobile).

Es realmente simple y consiste en añadir esta línea a la parte del <head> de nuestra página web:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Espero que os sirva.

Siempre ha corrido por mi pensamiento, por lo que siempre quise escribir mi opinión respecto a esto, que estas páginas se aprovechaban de su gran afluencia de visitantes que desesperados por la crisis o quizas por ahorrarse unos euros y poder disfrutar de algo de ocio, engañaban a sus usuarios haciendo crecer el precio real sin oferta de los productos o servicios.

Y así es, ya que casualmente, he podido comprobar que a fecha de 4 de mayo de 2012, Offerum ofrece entre sus ofertas, una que en mi opinión no es demasiado digna de ser considerada oferta, ya que ofrece un cupón para un buffet libre (puede verse aquí), a un precio que en mi opinión no es demasiado “oferta”.

Hasta aquí todo correcto, Offerum, ofrece cupones para el buffet, podemos leer diferentes opiniones y comentarios supuestamente reales hablando de la maravillosa calidad del buffet (dudo de esas opiniones…), pero si nos dirijimos a la propia página web del restaurante, nos daremos cuenta de la estafa.

Podemos ver aquí, que el mismo buffet que Offerum nos ofrece por un precio de oferta de 9,90€ podemos consumirlo por precios que van desde los 8,50€ para los días laborables, hasta los 14€ para fines de semana y festivos, que se aleja de los supuestos 17€ que nos dice Offerum ser su precio habitual.

Resumiendo mi opinión

Pienso, que no deberíamos creernos nunca lo que nos dicen estas páginas sin antes comprobarlo si que no quereis caer en mano de estafadores.

Pero que pasaría si en algún momento nuestra conexión a internet es mas lenta de lo normal, o si por ejemplo el servidor tarda mas de lo normal en responder?

Si no notificamos al usuario que la página está cargando X contenido, lo mas probable es que el usuario haga clics recurridamente donde desea entrar (provocando multitud de peticiones al servidor) o que acabe abandonando la página. Es por ello que siempre insisto que se notifique al usuario cuando algo está cargando para que esté al corriente y espere a que el contenido aparezca.

Una de las formas mas fáciles, rápidas y sencillas de hacerlo es añadiendo una clase CSS que posteriormente será eliminada.

Veamos el ejemplo práctico con jQuery.

$('#cargarContenido').click(function(){
    $('#resultado').addClass('loading')
                   .load('granPagina.html', function(){
                        $(this).removeClass('loading');
                   });
});

Y deberemos tambien añadir una línea a nuestro css que defina el estilo del loading, en nuestro ejemplo simplemente añadiremos un bonito gif animado indicando que algo está cargando:

.loading {
    background: url(loadingImage.gif) no-repeat center center;
}

Como veis, es una solución simple y sencilla de aplicar que mejorará las peticiones en ajax de cara al usuario que nunca se sentirá desatendido.

Podeis verlo en GitHub: https://github.com/ajimix/asana-api-php-class

La clase se encarga de todo el tema de peticiones a la API REST de Asana devolviendo un string en JSON mediante sencillas funciones. Dejo un par de ejemplos, podeis ver alguno mas en la página de github o descargando la propia clase.

Ejemplo API creación tarea

$asana->createTask(
    array(
        "workspace" => "123456", // ID del worspace
        "name" => "Hello World!", // El nombre de la tarea
        "assignee" => "12234", // Asignamos la tarea a...
        "followers" => array("324234", "2334545") // Finalmente añadimos a un par de miembros a que sigan la tarea
    )
);

Ejemplo API buscar tareas asignadas a un proyecto

La siguiente función nos devolverá las tareas contenidas dentro del proyecto 1234

$asana->getTasksByFilter(array("project" => "1234"));

Para ambos ejemplos debemos crear primeramente el objeto $asana

$asana = new Asana("API_KEY");

Recordar que podeis ver mas ejemplos en la web del proyecto.

Y por último recordar que la clase trabaja bajo la API de Asana, ver documentación de la API

Como decía, justo esta semana ha aparecido la API que permite gestionar algunos aspectos de Asana desde nuestros proyectos. Como podemos ver en la documentación, crear una nueva tarea, es realmente sencillo gracias a la API REST. En la documentación podemos ver un ejemplo realizado en Ruby. He decidido pasar el mismo ejemplo a PHP y creo que debo compartirlo con vosotros.

// Config
$timeout = 10;
$url = "https://app.asana.com/api/1.0/tasks"; // La URL para la petición
$apiKey = "xxxxxxxxxxxxxxxxxxxxxx:"; // La llave API

// Datos para la nueva tarea
$workspaceId = "999999999"; // El ID del workspace donde deseemos añadir la tarea
$taksName = "Hello World!"; // El titulo de la tarea
$assignee = "jefe@granempresa.com"; // A quien le asignaremos la tarea

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); // No imprimimos el resultado, lo guardamos en variable
curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
curl_setopt($curl, CURLOPT_FAILONERROR, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0); // No verificamos la conexion SSL
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0); //         ""           ""
curl_setopt($curl, CURLOPT_USERPWD, $apiKey);
curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-Type: application/json")); // Ei! Enviaremos en formato JSON  

//curl_setopt($curl, CURLOPT_VERBOSE, true); // Para pruebas, tests

// Construimos un array para posteriormente transformarlo a JSON
$data = array(
	"data" => array(
	    "workspace" => $workspaceId,
	    "name" => $taksName,
	    "assignee" => $assignee
	)
);

$data = json_encode($data);

curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

try {
    $return = curl_exec($curl);
    //echo "<pre>"; print_r(curl_getinfo($curl)); echo "<pre>";  // Tests
} catch(Exception $ex){
    // echo "<br>cURL error num: ".curl_errno($curl); // Tests
    // echo "<br>cURL error: ".curl_error($curl);  // Tests
    e("Error en el proceso cURL");
    $return = null;
}

curl_close($curl);

echo $return;

Creo que leyendo el código queda bastante claro, ademas de los comentarios que he incluido.
Si queréis hacer tests, sólo debéis descomentar las líneas que así lo indican.

La discusión se inició en base a un mensaje en github debido a que el bootstrap de twitter daba problemas de minificación al quitar los punto y coma de los finales de línea en los ficheros javascript. Se puede ver la discusión en el siguiente enlace: https://github.com/twitter/bootstrap/issues/3057

Ahora bien, aquí viene la pregunta,

Javascript obliga a usar punto y coma al final de línea?

La respuesta es NO

El lenguaje Javascript, un dialecto de ECMAScript, fue creado en su día para dotar de tecnología y dinamismo a las webs, si bien es un lenguaje interpretado, de la opción de finalizar o no las sentencias con punto y coma.

Por tanto tendremos que…

var foo = 'test'
console.log(foo)

Es lo mismo que…

var foo = 'test';
console.log(foo);

Pero bien, no siempre es todo oro lo que reluce. Ya que en numerosas ocasiones, nuestro código no funcionaría o simplemente no obtendriamos el mismo resultado.

Veamos algunos ejemplos

// Lo siguiente nos lanzará un error
var foo = 'hola'
('test' + '1234').toString()
// Ya que Javascript intentará ejecutar lo siguiente...
var foo = 'hola'('test' + '1234').toString()
// Y 'hola' no es una funcion

// En este caso nos pasará algo parecido ya que algo no definido, intentará ejecutar una función y si no está definido no podrá hacerlo...
var foo = function(){}
(function(){
    console.log(1)
})()

 
Como hemos podido ver, si que es posible programar en Javascript sin hacer uso de el punto y coma final, siempre en cuando tengamos presente casos como los mostrados arriba, pero en mi opinión, creo que no cuesta nada acostumbrarse a hacerlo con punto y coma y así evitarás futuros problemas que puedan surgir.