Construcción de Extensiones y Jetpacks
If you can't read please download the document
-
Upload
ccarruitero -
Category
Technology
-
view
1.460 -
download
2
Transcript of Construcción de Extensiones y Jetpacks
Diapositiva 1
Desarrollo de extensiones con Jetpack SDK
[] conjunto de herramientas que permite a cualquiera con conocimientos de HTML, CSS y JavaScript crear poderosas extensiones para Firefox.
Jetpack SDK
Kit de desarrollo que promete
revolucionar la forma de escribir
aplicaciones para Firefox.
Conocimientos previos
XUL
JavaScript
CSS
HTML
www.python.org/download
Jetpack SDK
jetpack.mozillalabs.com
Firefox
Qu necesitamos?
Instalar Firefox 4 en Ubuntu
sudo su -cd /home/usuario/Descargasmv firefox-4.0bx.tar.gz /optcd /opttar -xjvf firefox-4.0bx.tar.gzexit
/opt/firefox/firefox &
source bin/activate
bin\activate
Iniciar en Linux
En Windows
Iniciamos SDK
cd jetpack-sdk-x.x
Ir a carpeta
cfx docs
Documentacin
Primer paquete
hello-world
Estructura de archivos
hello-world package.json lib main.js data sample.html firefox-logo.jpg
Crear estructura
mkdir hello-worldcd hello-world gedit package.json & mkdir lib gedit lib/main.js & mkdir data gedit data/sample.html &
Guardar firefox-logo.jpg: hello-world/data
{
"author": "mahogany ",
"description": "A simple package.",
"license": "MPL 1.1/GPL 2.0/LGPL 2.1",
"version": "0.1",
"name": "hello-world"
}
Archivo manifest (package.json)
Hello World!
My first package.
Crear archivo (sample.html)
var self = require("self");var panels = require("panel");
var widgets = require("widget");
Programa principal (main.js)
var self = require("self");var panels = require("panel");
var widgets = require("widget");
exports.main = function(options, callbacks) {
console.log("My ID is " + self.id);
}
Programa principal (main.js)
var self = require("self");var panels = require("panel");
var widgets = require("widget");
exports.main = function(options, callbacks) {
console.log("My ID is " + self.id);
var hello_html = self.data.load("sample.html");
var my_panel = panels.Panel({
contentURL: "data:text/html," + hello_html
});
}
Programa principal (main.js)
var self = require("self");var panels = require("panel");
var widgets = require("widget");
exports.main = function(options, callbacks) {
console.log("My ID is " + self.id);
var hello_html = self.data.load("sample.html");
var my_panel = panels.Panel({
contentURL: "data:text/html," + hello_html
});
var icon_url = self.data.url("firefox-logo.jpg");
var my_widget = widgets.Widget({
label: "Firefox",
image: icon_url,
panel: my_panel
});
widgets.add(my_widget);
}
cfx run
Corremos nuestra extensin
cfx xpi
Creamos el instalador xpi
Segundo paquete
translate
Estructura de archivos
translate package.json lib main.js
Crear estructura
cd ..mkdir translatecd translate gedit package.json & mkdir lib gedit lib/main.js &
{ "author": "mahogany ",
"description": "A simple translate",
"license": "MPL 1.1/GPL 2.0/LGPL 2.1",
"version": "0.1",
"name": "translate"
}
Archivo manifest (package.json)
const contextMenu = require("context-menu");
var selection = require("selection");
function selectionExists() {
return !!selection.text;
}
Programa principal (main.js)
const contextMenu = require("context-menu");
var selection = require("selection");
function selectionExists() {
return !!selection.text;
}
var translateMenu = contextMenu.Menu({
label: "Traducir",
onClick: function (contextObj, item) {
contextObj.window.location.href = item.data + selection.text;
},
});
Programa principal
const contextMenu = require("context-menu");var selection = require("selection");
function selectionExists() {
return !!selection.text;
}
var translateMenu = contextMenu.Menu({
label: "Traducir",
onClick: function (contextObj, item) {
contextObj.window.location.href = item.data + selection.text;
},
context: selectionExists,
items: [
contextMenu.Item({
label: "Google",
data: "http://translate.google.com/#en|es|"
}),
]
});
const contextMenu = require("context-menu");var selection = require("selection");
function selectionExists() {
return !!selection.text;
}
var translateMenu = contextMenu.Menu({
label: "Traducir",
onClick: function (contextObj, item) {
contextObj.window.location.href = item.data + selection.text;
},
context: selectionExists,
items: [
contextMenu.Item({
label: "Google",
data: "http://translate.google.com/#en|es|"
}),
]
});
contextMenu.add(translateMenu);
cfx run
cfx xpi
Correr extensin y generar xpi
Mozilla Per
mozilla.pe
www.facebook.com/mozillaperu
groups.google.com/group/mozilla-peru
Csar Abel Carruitero Avila
[email protected]/ccarruiteroslideshare.net/ccarruitero
Desarrollo de extensiones con Jetpack SDK
