Hace unos días he publicado un artículo acerca de los Primeros pasos con el Addon SDK, el cual explica todo lo sencillo para tener listo y empezar a crear un Addon desde cero. Ahora como primer ejemplo enseñare como crear esa especie de barra de notificación que algunas veces nos aparece en Firefox avisándonos que nos falta algún plugin o que Firefox ha evitado que se abriera una ventana emergente. No es cosa de loco crearla y personalizarla a nuestro gusto. Al final de este articulo de seguro que sabrás como crear tus propias barras de notificaciones para darle mas personalidad a tus Addons o Just for fun! 🙂
Como primera medida es necesario que tengas claro y hallas cumplido con los pasos y detalles mencionados en este artículo. Y una vez que ya tengas todos los archivos generados para tu Addon siguiendo el articulo anterior, tendrás esta estructura que empezaras a editar:
* lib * data * test * doc * README.md * package.json * test/test-main.js * lib/main.js * doc/main.md
Nuestro archivo lib/main.js es el mas importante de todos, es el centro de comando de nuestro Addon, así que lo editamos y le escribimos la siguiente estructura:
var self = require("self");
var notification = require("notification-box").NotificationBox({
'value': 'important-message',
'label': 'Estas avisado',
'priority': 'WARNING_HIGH',
'image': self.data.url("gnu-icon.png"),
'buttons': [{'label': "Entiendo",
'onClick': function () { console.log("Has tocado algo importante!"); }}]
});
Como vemos no es gran cosa, ni nada del otro mundo, es algo muy sencillo y que parece bastante lógico de entender, es una estructura nada compleja. En el contenido del archivo main.js si nos fijamos en la segunda linea en donde dice require(«notification-box»), hablamos de que necesitamos una librería aparte para que todo pueda funcionar en el mismo directorio de donde se encuentra el main.js.
Nuestro lib/notification-box.js se ve de la siguiente manera:
"use strict";
const { Cc, Ci } = require("chrome");
const { getMostRecentBrowserWindow } = require('api-utils/window/utils');
let isString = function (str) {
return typeof(str) == 'string' || str instanceof String;
};
let isArray = function (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
};
exports.NotificationBox = function (options) {
options = options || {};
let mainWindow = getWindow();
let nb = mainWindow.gBrowser.getNotificationBox();
let notification, priority, label, image, value, buttons = [];
if (options.value && isString(options.value)) {
notification = nb.getNotificationWithValue(options.value);
value = options.value;
}
else {
notification = nb.getNotificationWithValue('');
value = '';
}
if (options.label && isString(options.label))
label = options.label;
else
label = "";
if (options.priority && options.priority in PRIORITY)
priority = nb[PRIORITY[options.priority]];
else
priority = nb[PRIORITY.INFO_LOW];
if (options.image && isString(options.image))
image = options.image;
else
image = 'chrome://browser/skin/Info.png';
if (isArray(options.buttons)) {
for (let i = 0, length = options.buttons.length; i < length; i++) {
buttons.push(NotificationButton(options.buttons[i]));
}
}
else if (typeof(options.buttons) === 'object') {
buttons.push(NotificationButton(options.buttons));
}
else {
buttons = null;
}
nb.appendNotification(label, value,
image,
priority, buttons);
return notification;
};
var NotificationButton = function (options) {
options = options || {};
let accessKey, onClick, label, popup;
if (options.accessKey)
accessKey = options.accessKey;
else
accessKey = '';
if (options.onClick)
onClick = options.onClick;
else
onClick = function () {};
if (options.label)
label = options.label;
else
label = "";
popup = null;
return {label: label,
accessKey: accessKey,
callback: onClick,
popup: popup};
};
const PRIORITY = {
'INFO_LOW': 'PRIORITY_INFO_LOW',
'INFO_MEDIUM': 'PRIORITY_INFO_MEDIUM',
'INFO_HIGH': 'PRIORITY_INFO_HIGH',
'WARNING_LOW': 'PRIORITY_WARNING_LOW',
'WARNING_MEDIUM': 'PRIORITY_WARNING_MEDIUM',
'WARNING_HIGH': 'PRIORITY_WARNING_HIGH',
'CRITICAL_LOW': 'PRIORITY_CRITICAL_LOW',
'CRITICAL_MEDIUM': 'PRIORITY_CRITICAL_MEDIUM',
'CRITICAL_HIGH': 'PRIORITY_CRITICAL_HIGH',
'CRITICAL_BLOCK': 'PRIORITY_CRITICAL_BLOCK'
};
let getWindow = function () {
return getMostRecentBrowserWindow();
};
exports.PRIORITY = PRIORITY;
De hecho estas librerías y pequeñas adiciones muchas veces no son necesarias que las crees tu o que te rompas el coco haciéndolas, aunque son divertidas y sencillas de hacer, tenemos un directorio repleto de todo tipo de librerías listas para ser usadas que puedes agregar y usar fácilmente.
Ademas de la libreria notification-box.js adicional, si nos fijamos en nuestro archivo principal el main.js en la linea sexta linea nos encontramos con self.data.url(icon.png»), lo cual nos pide que en nuestra carpeta data tengamos una imagen con el nombre de icon.png.
Nuestra imagen icon.png es esta:
Luego modificamos nuestro archivo package.json con algunas de nuestras preferencias, tendríamos algo como esto:
{
"name": "notification-example",
"license": "MPL 2.0",
"author": "Gioyik",
"version": "0.1",
"fullName": "notification-example",
"id": "jid1-dyFGGJB0CjoDMA",
"description": "un ejemplo de notificacion en un Addon"
}
Podemos modificarlo a nuestro gusto, son apenas unos pocos campos a rellenar y cambiar a preferencia. Finalmente ejecutamos el siguiente comando para ver como va quedando nuestro Addon:
cfx run
Nos mostrará algo como esto:
Vemos que todo nos esta saliendo tal cual lo queríamos, ahora como ya esta todo listo, si el resultado nos ha convencido y queremos empaquetar nuestro Addon en un xpi para instalarlo en donde queramos, simplemente ejecutamos:
cfx xpi
Sencillo! Ya se nos ha generado nuestro XPI para que lo ejecutamos y compartamos con quien queramos. Ademas, todo este procedimiento que he realizado en todo el articulo puedes descargarlo desde uno de mis Repos en Github.
Gioyik World! 