Ya hace tiempo hablamos de FUEL, un framework para desarrollar extensiones para Firefox. Ahora ya está disponible en Firefox 3, por lo que podemos ir aprendiendo y haciendo nuestras pruebas.
John Resig nos ofrece una serie de enlaces y ejemplos para empezar con FUEL:
En muchas aplicaciones web, la utilización de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando asà que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …
Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:
Ha sido detectada una vulnerabilidad en Firefox (independiente de versión) que se produce en el sistema de actualizaciones de extensiones.
Este fallo se produce porque el usuario no puede confiar (trust) en el DNS o en la conexión. Extensiones importantes como Google Toolbar, Google Browser Sync, Yahoo Toolbar y Del.icio.us Extension, están expuestas a esta vulnerabilidad, la cual permitirÃa instalar software peligroso en nuestro sistema.
Las extensiones que se descargan desde https://addons.mozilla.org no nos deben preocupar. A parte del equipo de seguridad de Mozilla, los desarrolladores de las principales extensiones expuestas fueron avisadas hace 45 dÃas sin que haya habido actualizaciónes.
Existe un vÃdeo que muestra un ataque a Google Browser Sync: (12MB Quicktime).
A Remote Vulnerability in Firefox Extensions
VÃa / Techmeme
FireMarker es una extensión para Firefox que hemos desarrollado en Sentido Web que permite marcar partes del texto de la página que estamos visitando.
Tan solo es necesario seleccionar el texto y pinchar en el icono que aparecerá en la barra de estado de nuestro navegador.
Una vez realizada esta función, el texto se marcará según los colores que sea hayan seleccionado, que por defecto serán amarillo para el fondo y negro para el color de letra.
Los textos marcados seguirán en este estado cuando se refresque la página o se reinicie el navegador, ya que la información marcada se almacena en las preferencias del navegador.
Entre las opciones que nos ofrece esta extensión de Firefox nos encontramos con:
Si alguien encuentra algún problema o error serÃa de gran ayuda que nos lo comunicara.
MinimizeToTray es una extensión para Firefox, Thunderbird, Mozilla Suite y Nvu que nos permite minimizar estas aplicaciones al system tray de Windows. Permite que sea cuando se minimiza la ventana o cuando se cierra, pudiendo recuperarla mediante un doble click en el icono del system tray.
Una extensión muy útil para aquellos que no quieren que su jefe en el trabajo vea la pestaña de Firefox en la barra de tareas cuando le de por “controlar” lo que hacemos.
MinimizeToTray
VÃa / firefoXtensions
El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:
npm initRellenamos todos los datos que nos van pidiendo para configurar el proyecto.
Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.
npm i @hapi/hapinpm i @hapi/glue¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.
Ahora creamos el fichero index.js e insertamos el siguiente código:
const Glue = require( '@hapi/glue' );
const manifest = {
server: {
port: 3001,
},
};
const options = {
relativeTo: __dirname,
};
const startServer = async function() {
try {
const server = await Glue.compose( manifest, options );
await server.start();
console.log( 'hapi days!' ); // eslint-disable-line
} catch ( err ) {
console.error( err ); // eslint-disable-line
process.exit( 1 );
}
};
startServer();Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.
Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.
¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:
npm i --save-dev nodemonY ejecutaremos lo siguiente para arrancar el servidor:
npm run startPuedes obtener el código en GitHub hapi-vue-demo 0.1.0
Os voy a pasar un pequeño script que nos dividirÃa un elemento de texto HTML (TEXT_NODE) en distintas partes. Quizás os pueda resultar un script extraño, pero se puede usar poner en negrita palabras o alguna otra cosa, yo en mi caso ya le he encontrado utilidad un par de veces y ahora estoy usándolo otra vez en algo que os contaré más adelante (espero que dentro de poco tiempo).
Imaginaros que tenemos un elemento HTML que es realmente un nodo de texto (pensad en DOM, no en innerHTML), por ejemplo:
var elem = document.createTextNode('Esto es una prueba');
document.body.appendChild(elem);Ahora queremos cambiar “es una” por “es una“. Lo que tendrÃamos que hacer es dividir en texto en tres partes “Esto “, “es una”, ” prueba”, crearemos tres objetos de texto, cada una con cada trozo de texto y luego un elemento STRONG en el que incluiremos el texto del medio. Por último incluimos los elementos nuevos y eliminamos el anterior.
// Obtenemos primera parte de texto
var parte = elem.nodeValue.substring(0,
elem.nodeValue.indexOf("es una"));
// Creamos elemento de texto con contenido "Esto "
var obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Obtenemos segunda parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una"), elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Lo añadimos a un objeto STRONG
var negrita = document.createElement("STRONG");
negrita.appendChild(obj);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(negrita, elem);
// Obtenemos tercera parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Eliminamos elemento anterior
elem.parentNode.removeChild(elem);