¿Cómo borrar el historial?

Los sistemas informáticos actuales son auténticos engullidores de datos. Prácticamente cualquier acción que hagamos queda registrada. Muchas veces no nos importa demasiado y es incluso conveniente para nosotros pero a veces es necesario eliminar nuestros preciados datos.

Un rastro digital que dejamos cuando navegamos por la web es el historial. Como si fuese Pulgarcito, el navegador va guardando las páginas que hemos visitado y su orden. Esto puede ser interesante si queremos volver a visitar una página que visitamos hace unos días pero no nos acordamos de su nombre exacto.

El botón que da acceso al historial en Firefox. En otros navegadores es similar.
Como puedes observar es fácil saber en qué páginas has estado antes. Incluyendo redes sociales.

Pero no creas que el historial se guarda solo en los navegadores (Explorer, Chrome, Firefox, Opera, Safari, …) sino que ciertas webs también construyen sus propios historiales. YouTube o Google construyen sus propios historiales que construyen si el usuario ha iniciado sesión en el sistema.

Estos historiales también se pueden borrar como veremos más adelante.

No obstante, el navegador guarda otros datos de nuestra navegación. Cualquier persona que accediese a nuestro ordenador. Estos datos son las cookies (muy famosas por los insistentes avisos), la caché, los fomularios y las contraseñas que hayamos decidido guardar para nuestra comodidad.

Las cookies son necesarias para la navegación web tal como la entendemos hoy, sin embargo puede ser interesante borrarlas de forma regular. ¿Sabes por qué Google implementó la navegación privada en Chrome? Porque quería evitar que la gente borrase sus cookies cuando visitaban sitios de los que no querían dejar rastro en su ordenador. De ese modo Chrome seguía teniendo las cookies y los usuarios entran en un modo de incógnito. No obstante, eliminar las cookies de forma manual sigue siendo algo recomendable.

La caché la forman archivos (estilos, imágenes, fuentes,…) que se descargan la primera vez que visitamos una página. Estos se guardan en nuestro ordenador para que una vez accedamos de nuevo a esa web esta tarde menos en cargar. Es por ello que la caché está llena de archivos que se supone que nunca van a cambiar. Aun así, esta caché puede delatar las páginas que visitamos.

Para obtener más información los compañeros de http://borrar-historial.com se han pegado un currazo dando métodos efectivos y fiables de como borrar un historial.

 

Tutorial de WebExtensions (II) – Popup y Tabs

Continuamos con el tutorial de WebExtensions, hoy veremos un elemento muy útil para muchas extensiones que es el popup.

¿Qué es el popup?

El popup es un panel desplegable que se acciona al pulsar un botón de acción. Este panel es una página HTML que puede contener código JavaScript.

popup

El popup es el elemento que permite al usuario un mayor control sobre la extensión y es ideal tanto para mostrar información como para contener acciones. De hecho, WebExtensions limita el número de botones de acción que puede crear una extensión a uno. Si queremos simular tener más botones deberemos usar un popup que despliegue un pequeño menú.

Definir el popup en manifest.json

Para definir el popup tenemos que indicar la ubicación del fichero HTML correspondiente al popup.

Con eso ya tenemos definido el popup. Se mostrará el botón en la barra superior y al hacer click se abrirá el popup.

El PopUp en sí

El PopUp es un fichero HTML sin el mayor misterio. Para definir el tamaño del PopUp usaremos CSS:

Y el navegador adaptará el PopUp a esas dimensiones. A ese archivo HTML le podemos añadir archivos JavaScript mediante el procedimiento habitual en la web, vía una etiqueta script. Lo interesante viene en estos archivos de JavaScript pues cuentan con más privilegios. Desde ellos podemos acceder a las APIs retringidas a extensiones así como librarnos de limitaciones impuestas a las webs (como la política que bloquea los XMLHttpRequests ejecutados a dominios ajenos a nuestra página).

Para usar las APIs restringidas debemos pedir permiso en el fichero manifest.json. Por ejemplo, vamos a jugar con las pestañas. Para ello usamos los permisos tabs y activeTab.

Tabs (pestañas) en WebExtensions

La API se encuentra en chrome.tabs y dispone de varios métodos y eventos. Vamos a ver los más importantes:

  • chrome.tabs.query – Obtener información de las pestañas
    • Este método es muy flexible, lo podemos comparar a hacer un SELECT en SQL, pues obtiene una lista de pestañas que cumplen los parámetros que hemos indicado. Por ejemplo para comprobar la pestaña actual, usaremos la propiedad active:

      Otra opción muy interesante es para averiguar que pestañas tienen abierta una URL que cumple un patrón. Además los parámetros de búsqueda se pueden combinar:

  • chrome.tabs.create – Permite crear nuevas pestañas
    • Su uso básico es muy simple

  • chrome.tabs.executeScript – Esta función permite inyectar a la pestaña un script de contenido (Content Script).
    • Ahora no vamos a entrar en como se realizaría la comunicación entre los scripts Background y los Content. El código se puede pasar por una cadena de texto o por un archivo, siendo preferible esta última opción. Se puede especificar además cuando queremos que se ejecute dentro del ciclo de carga de la pestaña.

  • chrome.tabs.insertCSS – Permite inyectar CSS en la pestaña
    • Su uso es exactamente igual al de chrome.tabs.executeScript

  • chrome.tabs.sendMessage – Enviar un mensaje a la pestaña
    • Hasta ahora no hemos visto la separación entre background y content scripts. Esta función permite enviar datos desde los scripts background a los content, que tendrán una función de escucha. La menciono, pero lo veremos más adelante en profundidad.

Por último, veamos algunos de los eventos que puede generar la API.

  • chrome.tabs.onUpdated – Es llamado cada vez que una pestaña sufre una modificación en sus datos (cambio de URL, quitar el sonido, finalizar una carga, etc)
    • Es muy posible que necesitemos filtrar el contenido que nos da, para fijarnos si se ha producido en una URL que nos interesa o en alguna condición relevante. Eso no obstante, es responsabilidad del programador.

Con esto ya podemos hacer extensiones interesantes, la APIs de PopUp y de Tabs son de las más usadas en WebExtensions.

Tutorial de WebExtensions (I) – manifest.json y conceptos

WebExtensions es un sistema para desarrollar extensiones de navegador. Realmente se trata de la API original de Google Chrome y Chromium. Esta API ya había sido diseñada teniendo en cuenta las extensiones de Firefox basadas en XUL y XPCOM. Simplifica mucho el proceso de tareas comunes, no requiere reinicios y es más segura al no permitir tanto control sobre el navegador.

WebExtensions
Tomada de http://tenfourfox.blogspot.com.es/2015/08/okay-you-want-webextensions-api.html

Posteriormente Firefox respondería con Jetpack y Addon SDK, un sistema similar pero escrito encima de XUL y XPCOM, incompatible pero que no necesitaba reinicios y tampoco perdía potencia pues las APIs de XPCOM seguían allí.

Luego Opera decide abandonar Presto y usar Blink, el motor de Chromium. Con respecto a su sistema de extensiones, planean ser 100% compatibles con Chrome.

Firefox también ha de realizar cambios internos, concretamente se inició el trabajo (electrolysis) de hacer Firefix multiproceso. Esto rompía gran parte de las APIs internas de Firefox. Todos los complementos necesitarían ser reescritos. Ya de paso, teniendo en cuenta que hay que diseñar una nueva API para extensiones, se toma la de Chrome y se renombra WebExtensions. Posteriormente Microsoft afirma que Edge será compatible con extensiones de Chrome o WebExtensions. Esta es la historia de como 4 navegadores se pusieron de acuerdo en estandarizar la API de desarrollo de extensiones para navegadores.

En esta serie de tutoriales vamos a ver como programar nuestra extensión usando WebExtensions.

manifest.json

El fichero manifest.json de una extensión es muy importante y es obligatorio. Contiene metadatos de la extensión así como permisos de los que dispone la extensión y las acciones que define.

En primer lugar vamos a distinguir entre distintos tipos de scripts distintos.

  • Background scripts: estos scripts se ejecutan en el fondo del navegador. Se ejecutan al iniciar el navegador. Podemos configurar eventos y entonces se mantendrán a la escucha durante toda la sesión. Estos scripts no pueden acceder a las páginas web.
  • Content scripts: estos scripts se añaden a determinadas páginas según un patrón en el archivo manifest.json o desde un background script. Estos scripts interactúan directamente con las páginas en los que han sido adjuntados.

Veamos ahora un fichero manifest.json

 

manifest_version siempre es 2. Al principio rellenamos metadatos sencillos, name, description, version, homepage_url,… Posteriormente debemos añadir los iconos. Dependiendo de lo que queramos no hacen falta todos los iconos. Por ejemplo, el icono de 16×16 solo es necesario si nuestra extensión define un menú contextual del botón derecho. La sección applications ha sido añadida por Mozilla y originalmente no está en Chrome. Define la compatibilidad entre distintos navegadores y versiones, sin embargo, por ahora solo Firefox tiene en cuenta esto.

A continuación se definen los permisos. Una extensión necesita pedir permiso para acceder a ciertas APIs más privilegiadas. Por ejemplo, para mostrar notificaciones o para realizar peticiones HTTP a servidores remotos.

A continuación vemos la acción del navegador. A diferencia de otros sistemas de extensiones, WebExtensiones solo permite un botón en la interfaz del navegador. Es una manera excelente de separar funcionalidades, aunque si vienes de Firefox verás como limita a muchas extensiones, algunas de las cuáles modificaban la interfaz por completo. La acción del navegador puede hacer dos cosas: abrir un panel popup o generar un evento en el background script. Dependiendo de como sea la experiencia de usuario que prefieras te convendrá una opción u otra (en este caso, como no hemos definido un popup html default_popup, tendremos que escuchar el evento browserAction en un background script). Similar a browser_action existe page_action, la única diferencia es el lugar donde aparece el botón.

Page Action a la izquierda
Browser Action a la derecha

Después podemos asignar archivos de background scripts. Por último options_ui es la manera adecuada de crear una página de opciones. Será una página HTML, pero de eso hablaremos en otro tutorial.

Por último vamos a ver los content scripts

Una manera de añadir content scripts es desde el manifest.json, especificando un patrón en matches. Podemos añadir JavaScript y CSS.

Otra opción es web_accesible_resources. Se trata de elementos de la extensión que pueden ser cargados desde una página web. Por ejemplo, si un content script quiere mostrar una imagen en una web, esta deberá estar indicada en web_accesible_resources.

Este fichero es el más importante de una WebExtension. En el siguiente tutorial veremos los background scripts combinados con browser actions.

Proyecto Ceres

El círculo de Deming es una estrategia de mejora continua de la calidad. También tenemos DMAIC y Seis Sigma. Parece por tanto que la mejora continua de la calidad es importante dentro de cualquier proceso productivo.

DMAIC

Parte de mi software más exitoso de cara al público han sido las extensiones que he ido desarrollando para Firefox. Ayudan a la gente y además gano un dinerillo. Recibes feedback fácilmente e incluso me han propuesto ideas de desarrollo de nuevos complementos. Es algo agradable si sale bien, pero no he tenido tiempo últimamente para diseñar nuevas extensiones o mejorar las existentes. Así que algunas extensiones dejaron de ser tan funcionales y decidí que requerían pasar por un proceso de mejora continua de calidad. El Proyecto Ceres.

DMAIC-2

Este proyecto busca actualizar las extensiones para una mejor experiencia de uso. El registro de cambios es voluminoso, aunque en muchos casos la solución adoptada para un complemento es válida para otro.

Lista de cambios

  • DivTranslate
    • La API de ScaleMT había dejado de funcionar. Ahora se usa APY.
  • mozCleaner
    • Errores de escritura
  • The Super Clock
    • Pequeño fallo que hacía que horas con un cero delante no ocupasen lo mismo que las demás. Por ejemplo, 21:04 era representado como 21:4.
  • Google+ Share
    • Arreglar un fallo molesto que hacía que desapareciese el icono en algunas ventanas. Gracias a ismirth por decírmelo. Se actualizó a Australis.
    • Traducción de Google+ Share a diversos idiomas
    • Gestión analítica
  • No más 900
    • Nuevo complemento
  • Google+ Share for Android
    • Actualizar rutas a los módulos de Addon SDK
    • No interrumpir en las selecciones de texto. Se ha cambiado el lugar donde aparece el botón para no quitar la opción de seleccionar texto de Firefox.
  • Google AdSense Earnings
    • Nuevo complemento
    • Módulo en npm de identificación con Google via OAuth2
  • Bc.vc shortener
    • Nuevo complemento
  • DivHTTP
    • Traducciones
    • Ahora viene con su propia copia de httpd.js, puesto que ha sido retirado de Firefox
  • Divel Notepad
    • Traducciones

El objetivo con esto es elevar la calificación que tengo en AMO por encima de las 3 estrellas sobre 5 actuales que tengo. He recibido malas críticas en algunos de estos complementos que me gustaría intentar remediar.

Usando Node con XULRunner y Gecko

Las aplicaciones basadas en HTML5 para el escritorio han ido en aumento. Soluciones como node-webkit, recientemente renombrado a NW.js, han crecido en popularidad. Juegos como Game Dev Tycoon o aplicaciones como Atraci o Popcorn Time son solo unos ejemplos de apliaciones que usan node-webkit. Sin embargo las personas que preferimos tecnología de Mozilla nos encontrabas con que no había nada que sirviese.

node-xulrunner

Así que tenía que hacer algo. De momento es más que nada una prueba de concepto sin nada reseñable y con miles de bugs potenciales. Lo he diseñado para ser llamado desde una API de CommonJS. Esto permitirá tener un cliente de línea de comandos de manera sencilla, pero de momento no lo voy a hacer. Os enseñaré a usarlo con otro método

Nuestra aplicación HTML5, Node.js, XULRunner

El primer paso será clonar el proyecto node-xulrunner de GitHub.

La estructura del proyecto ya es una aplicación empaquetable, de manera que solo tendremos que modificar ciertos ficheros. Necesitaremos editar el archivo test.js para indicar ciertas preferencias sobre la aplicación. Algunos parámetros interesantes son os que puede ser: win32, mac, linux-i686 o linux-x86_64 y version que debe coincidir con una versión de XUL Runner disponible y publicada. El resto de opciones son autoexplicativas cuando las veais. En mi caso test.js queda así:

Ahora debemos crear nuestra aplicación propiamente dicha. Se encuentra bajo el directorio app/ y concretamente el fichero main.js será el ejecutado nada más arrancar la aplicación. main.js puede usar todas las APIs de Node. De hecho si usamos npm en esa carpeta funcionaría correctamente. En mi caso:

Y ahora los pasos mágicos. Vamos a la terminal y ejecutamos test.js con Node.

Nos saldrá una advertencia y empezará a descargar XULRunner y Node.js. Este ejecución no creará ninguna aplicación. Para, ahora sí, crear la aplicación debemos llamar otra vez a test.js

Y en la carpeta build/ tendremos la aplicación lista para ser probada. Simplemente tendremos que ejecutar app

HTML5App-XULRunner