0
<ul>Desarrollo de extensiones con   Jetpack SDK </ul>
[…] conjunto de herramientas que permite a cualquiera con conocimientos de  HTML, CSS y JavaScript  crear poderosas extens...
Conocimientos previos XUL JavaScript CSS HTML
¿Qué necesitamos? <ul>www.python.org/download </ul><ul>Jetpack SDK </ul><ul>jetpack.mozillalabs.com </ul><ul>Firefox </ul>
Instalar Firefox 4 en Ubuntu sudo su - cd /home/usuario/Descargas mv firefox-4.0bx.tar.gz /opt cd /opt tar -xjvf firefox-4...
Iniciamos SDK <ul>source bin/activate </ul><ul>binactivate </ul><ul>Iniciar en Linux </ul><ul>En Windows </ul><ul>cd jetpa...
Documentación <ul>cfx docs </ul>
Primer paquete hello-world
Estructura de archivos hello-world package.json lib main.js data sample.html firefox-logo.jpg
Crear estructura mkdir hello-world cd hello-world gedit package.json & mkdir lib gedit lib/main.js & mkdir data gedit data...
Archivo manifest (package.json) <ul>{ </ul><ul><li>&quot;author&quot;: &quot;mahogany <cesar@mozilla.pe>&quot;,  </li></ul...
&quot;license&quot;: &quot;MPL 1.1/GPL 2.0/LGPL 2.1&quot;,
&quot;version&quot;: &quot;0.1&quot;,
&quot;name&quot;: &quot;hello-world&quot;
} </li></ul>
Crear archivo (sample.html) <ul><html> <li><body>
<h1>Hello World!</h1>
My first package.
</body>
</html> </li></ul>
Programa principal (main.js) <ul>var self = require(&quot;self&quot;); <li>var panels = require(&quot;panel&quot;);
var widgets = require(&quot;widget&quot;); </li></ul>
Programa principal (main.js) <ul>var self = require(&quot;self&quot;); <li>var panels = require(&quot;panel&quot;);
var widgets = require(&quot;widget&quot;);
exports.main = function(options, callbacks) {
console.log(&quot;My ID is &quot; + self.id);
} </li></ul>
Programa principal (main.js) <ul>var self = require(&quot;self&quot;); <li>var panels = require(&quot;panel&quot;);
Upcoming SlideShare
Loading in...5
×

Construcción de Extensiones y Jetpacks

1,148

Published on

Construcción de Extensiones y Jetpacks

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,148
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Construcción de Extensiones y Jetpacks "

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

    Clipping is a handy way to collect important slides you want to go back to later.

×