Construcción de Extensiones y Jetpacks

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

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 &

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

12. "license": "MPL 1.1/GPL 2.0/LGPL 2.1",

13. "version": "0.1",

14. "name": "hello-world"

15. }

17. <h1>Hello World!</h1>

18. My first package.

19. </body>

20. </html>

22. var widgets = require(&quot;widget&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. }

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. }

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. }

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 &

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. }

65. function selectionExists() {

66. return !!selection.text;

67. }

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. });

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. });

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);