Construcción de Extensiones y Jetpacks

  • 1,108 views
Uploaded on

Construcción de Extensiones y Jetpacks

Construcción de Extensiones y Jetpacks

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,108
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.
      Desarrollo de extensiones con Jetpack SDK
  • 2. […] 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.
  • 3. Conocimientos previos XUL JavaScript CSS HTML
  • 4. ¿Qué necesitamos?
      www.python.org/download
      Jetpack SDK
      jetpack.mozillalabs.com
      Firefox
  • 5. Instalar Firefox 4 en Ubuntu sudo su - cd /home/usuario/Descargas mv firefox-4.0bx.tar.gz /opt cd /opt tar -xjvf firefox-4.0bx.tar.gz exit /opt/firefox/firefox &
  • 6. Iniciamos SDK
      source bin/activate
      binactivate
      Iniciar en Linux
      En Windows
      cd jetpack-sdk-x.x
      Ir a carpeta
  • 7. Documentación
      cfx docs
  • 8. Primer paquete hello-world
  • 9. Estructura de archivos hello-world package.json lib main.js data sample.html firefox-logo.jpg
  • 10. Crear estructura mkdir hello-world cd hello-world gedit package.json & mkdir lib gedit lib/main.js & mkdir data gedit data/sample.html & Guardar firefox-logo.jpg: hello-world/data
  • 11. Archivo manifest (package.json)
      {
    • &quot;author&quot;: &quot;mahogany <cesar@mozilla.pe>&quot;,
    • &quot;description&quot;: &quot;A simple package.&quot;,
    • 12. &quot;license&quot;: &quot;MPL 1.1/GPL 2.0/LGPL 2.1&quot;,
    • 13. &quot;version&quot;: &quot;0.1&quot;,
    • 14. &quot;name&quot;: &quot;hello-world&quot;
    • 15. }
  • 16. Crear archivo (sample.html)
  • 21. Programa principal (main.js)
      var self = require(&quot;self&quot;);
    • var panels = require(&quot;panel&quot;);
    • 22. var widgets = require(&quot;widget&quot;);
  • 23. Programa principal (main.js)
      var self = require(&quot;self&quot;);
    • var panels = require(&quot;panel&quot;);
    • 24. var widgets = require(&quot;widget&quot;);
    • 25. exports.main = function(options, callbacks) {
    • 26. console.log(&quot;My ID is &quot; + self.id);
    • 27. }
  • 28. Programa principal (main.js)
      var self = require(&quot;self&quot;);
    • var panels = require(&quot;panel&quot;);
    • 29. var widgets = require(&quot;widget&quot;);
    • 30. exports.main = function(options, callbacks) {
    • 31. console.log(&quot;My ID is &quot; + self.id);
    • 32. var hello_html = self.data.load(&quot;sample.html&quot;);
    • 33. var my_panel = panels.Panel({
    • 34. contentURL: &quot;data:text/html,&quot; + hello_html
    • 35. });
    • 36. }
  • 37.
      var self = require(&quot;self&quot;);
    • var panels = require(&quot;panel&quot;);
    • 38. var widgets = require(&quot;widget&quot;);
    • 39. exports.main = function(options, callbacks) {
    • 40. console.log(&quot;My ID is &quot; + self.id);
    • 41. var hello_html = self.data.load(&quot;sample.html&quot;);
    • 42. var my_panel = panels.Panel({
    • 43. contentURL: &quot;data:text/html,&quot; + hello_html
    • 44. });
    • 45. var icon_url = self.data.url(&quot;firefox-logo.jpg&quot;);
    • 46. var my_widget = widgets.Widget({
    • 47. label: &quot;Firefox&quot;,
    • 48. image: icon_url,
    • 49. panel: my_panel
    • 50. });
    • 51. widgets.add(my_widget);
    • 52. }
  • 53. Corremos nuestra extensión
      cfx run
  • 54. Creamos el instalador xpi
      cfx xpi
  • 55. Segundo paquete translate
  • 56. Estructura de archivos translate package.json lib main.js
  • 57. Crear estructura cd .. mkdir translate cd translate gedit package.json & mkdir lib gedit lib/main.js &
  • 58. Archivo manifest (package.json)
      {
    • &quot;author&quot;: &quot;mahogany <cesar@mozilla.pe>&quot;,
    • 59. &quot;description&quot;: &quot;A simple translate&quot;,
    • 60. &quot;license&quot;: &quot;MPL 1.1/GPL 2.0/LGPL 2.1&quot;,
    • 61. &quot;version&quot;: &quot;0.1&quot;,
    • 62. &quot;name&quot;: &quot;translate&quot;
    • 63. }
  • 64. Programa principal (main.js)
      const contextMenu = require(&quot;context-menu&quot;);
    • var selection = require(&quot;selection&quot;);
    • 65. function selectionExists() {
    • 66. return !!selection.text;
    • 67. }
  • 68. Programa principal
      const contextMenu = require(&quot;context-menu&quot;);
    • var selection = require(&quot;selection&quot;);
    • 69. function selectionExists() {
    • 70. return !!selection.text;
    • 71. }
    • 72. var translateMenu = contextMenu.Menu({
    • 73. label: &quot;Traducir&quot;,
    • 74. onClick: function (contextObj, item) {
    • 75. contextObj.window.location.href = item.data + selection.text;
    • 76. },
    • 77. });
  • 78.
      const contextMenu = require(&quot;context-menu&quot;);
    • var selection = require(&quot;selection&quot;);
    • 79. function selectionExists() {
    • 80. return !!selection.text;
    • 81. }
    • 82. var translateMenu = contextMenu.Menu({
    • 83. label: &quot;Traducir&quot;,
    • 84. onClick: function (contextObj, item) {
    • 85. contextObj.window.location.href = item.data + selection.text;
    • 86. },
    • 87. context: selectionExists,
    • 88. items: [
    • 89. contextMenu.Item({
    • 90. label: &quot;Google&quot;,
    • 91. data: &quot;http://translate.google.com/#en|es|&quot;
    • 92. }),
    • 93. ]
    • 94. });
  • 95.
      const contextMenu = require(&quot;context-menu&quot;);
    • var selection = require(&quot;selection&quot;);
    • 96. function selectionExists() {
    • 97. return !!selection.text;
    • 98. }
    • 99. var translateMenu = contextMenu.Menu({
    • 100. label: &quot;Traducir&quot;,
    • 101. onClick: function (contextObj, item) {
    • 102. contextObj.window.location.href = item.data + selection.text;
    • 103. },
    • 104. context: selectionExists,
    • 105. items: [
    • 106. contextMenu.Item({
    • 107. label: &quot;Google&quot;,
    • 108. data: &quot;http://translate.google.com/#en|es|&quot;
    • 109. }),
    • 110. ]
    • 111. });
    • 112. contextMenu.add(translateMenu);
  • 113. Correr extensión y generar xpi
      cfx run
      cfx xpi
  • 114.
      Mozilla Perú
      mozilla.pe
      www.facebook.com/mozillaperu
      groups.google.com/group/mozilla-peru
      César Abel Carruitero Avila
      [email_address]
    • Twitter.com/ccarruitero
    • 115. slideshare.net/ccarruitero
      Desarrollo de extensiones con Jetpack SDK