1. Chapter 3 Building your own Extensions

2. Development Environment

3. Must Haves ・ Text Editor （ UTF-8 compatible ） ・ File Archiver （ ZIP compatible ）

4. Nice to Have ・ JavaScript debugger （ Venkman ） ・ Hidden preferences for development

5. Text Editor

6. Hidemaru Editor http://hide.maruo.co.jp/ TeraPad http://www5f.biglobe.ne.jp/~t-susumu/

7. File Archiver

8. 7-Zip http://www.7-zip.org/

9. Debugger

10. Venkman JavaScript debugger https://addons.mozilla.org/firefox/216 Japanese language package http://piro.sakura.ne.jp/latest/ blosxom.cgi/mozilla/extension/ 2005-09-30_venkman-ja.htm

11. Hidden Preferences

12. ・ browser.dom.window.dump.enabled Enables dump output to console →true ・ javascript.options.showInConsole Enables errors to be reported to console →true

13. Create a new profile for development work

14. ・ firefox.exe -p Start profile manager ・ firefox.exe -p "foobar" Start up using specific profile ・ firefox.exe -p "foobar" -no- remote Start multiple Firefox instances using different profiles

16. Now, on to actually building an Extension

17. …… But

18. Try modifying the Firefox code first

19. C:\Program Files \Mozilla Firefox \chrome\browser.jar

21. Implementation steps for the Firefox browser

22. Step1. Extract browser.jar Step2. Modify browser.xul Step3. Compress browser.jar Step4. Double check * It's a good idea to back up a copy of browser.jar

23. Displaying a “Hello, world!!” message

24. content\browser\browser.xul 1388. 1389. 1390. 1391. 1392. 1393. 1394. 1395. 1396. Add this to the end of the file

25. Restart Firefox

27. Display “Hello, world!!” in the “Tools” menu

28. content\browser\browser.xul 931. 932. 933. <menuitem label="&search.label;" accesskey="&search.accesskey;" 934. key="key_search" command="Tools:Search"/> (snipped) ‏ 939. <menuitem accesskey="&pageInfoCmd.accesskey;" label="&page...l;" 940. command="View:PageInfo"/> 941. 942. 943. <menuitem id="sanitizeItem" 944. accesskey="&clearPrivateDataCmd.accesskey;" 945. label="&clearPrivateDataCmd.label;" 946. key="key_sanitize" command="Tools:Sanitize"/> (snipped) ‏ 943. 944. Add this to the file

29. Restart Firefox

32. Turn these modifications into an Extension

33. Upload your work to ftp://sfc-ftp.ai3.net/ ~incoming/mozilla24-ws/

34. http://piro.sakura.ne.jp/ xul/doc/ 20070726keio/XUL3-1.zip

35. Step1. Prepare files and folders Step2. Create manifest file Step3. Create XPI package

36. Preparing files and folders

37. helloworld chrome overlay.xul install.rdf chrome.manifest content

38. Isolate the XUL modifications for the overlay file

39. (snipped) ‏ <menu id="tools-menu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;"> (snipped) ‏ (snipped) ‏ (snipped) ‏ overlay.xul 1. 2.<overlay id="helloworldOverlay" 3. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 4. 5. <menuitem id="helloworldMenuitem" 6. label="Hello, world!" 7. insertbefore="sanitizeSeparator"/> 8. 9.

40. overlay.xul 1. 2.<overlay id="helloworldOverlay" 3.xmlns="http://www.mozilla.org/ keymaster/gatekeeper/there.is.only.xul"> 4. 5. <menuitem id="helloworldMenuitem" 6. label="Hello, world!" 7. insertbefore="sanitizeSeparator"/> 8. 9.

41. Creating a manifest file

42. 1 install.rdf extension metadata

43. install.rdf 1. 2.<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 3. xmlns:em="http://www.mozilla.org/2004/em-rdf#"> 4. 5. helloworld@piro.sakura.ne.jp 6. 2 7. Hellow, world! 8. 0.1 9. My first extension. 10. SHIMODA Hiroshi 11. http://piro.sakura.ne.jp/xul/ 12. 13. 14. {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 15. 2.0 16. 2.0.0.* 17. 18. 19.

44. install.rdf (1) ‏ 1. 2.<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 3. xmlns:em="http://www.mozilla.org/2004/em-rdf#"> 4. 5. helloworld@piro.sakura.ne.jp 6. 2 7. Hellow, world! 8. 0.1 9. My first extension. 10. SHIMODA Hiroshi 11. http://piro.sakura.ne.jp/xul/

45. install.rdf (2) ‏ 12. 13. 14. {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 15. 2.0 16. 2.0.0.* 17. 18. 19. IDs that can be assigned to target Application Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384} Thunderbird: {3550f703-e582-4d05-9a08-453d09bdfdc6}

46. 2 chrome.manifest file path and designating overlay

47. chrome.manifest 1.content helloworld chrome/content/ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul

48. chrome.manifest(1) ‏ 1.content helloworld chrome/content/ chrome://helloworld/content/ Chrome URL

49. chrome.manifest(2) ‏ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul browser.xul

50. chrome.manifest(2) ‏ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul browser.xul overlay.xul

51. chrome.manifest(2) ‏ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul browser.xul overlay.xul browser.xul

52. Creating the XPI package

53. Cross-Platform Install Package

54. Is just a ZIP Archive under the cover

55. helloworld chrome overlay.xul install.rdf chrome.manifest content helloworld.xpi

56. Now use the browser.jar backed up earlier to install the helloworld.xpi

58. Adding a clock feature

60. http://piro.sakura.ne.jp/ xul/doc/ 20070726keio/XUL3-2.zip

61. Step1. Build the framework with XUL Step2. Build the logic with JavaScript Step3. Make the clock window accessible from the menu Step4. Repackage the XPI

62. Step 1. Build the framework with XUL

63. helloworld chrome overlay.xul install.rdf chrome.manifest content clock.xul

64. 1. 2. 3.<dialog id="clockDialog" 4. xmlns= "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 5. title="Clock" 6. buttons="accept" 7. onload="initClock();"> 8. <script type="application/x-javascript" 9. src="clock.js"/> 10. 11. 12. 13. 14.

65. clock.xul(1) ‏ 1. 2. 3.<dialog id="clockDialog" 4. xmlns="..." 5. title="Clock" 6. buttons="accept" 7. onload="initClock();">

66. clock.xul(2) ‏ 8.<script type="application/x-javascript" 9. src="clock.js"/> 10. 11. 12. 13. 14.

67. Step 2. Build the logic with JavaScript

68. helloworld chrome overlay.xul install.rdf chrome.manifest content clock.xul clock.js

69. 1.Function initClock() { 2. showCurrentTime(); 3. window.setInterval(showCurrentTime, 1000); 4.} 5.function showCurrentTime() { 6. var textbox = document.getElementById("currentTime"); 7. textbox.value = new Date().toLocaleTimeString(); 8. textbox.select(); 9.}

70. Step 3. Make the clock window accessible from the menu

71. overlay.xul 5.<menuitem id="helloworldMenuitem" 6. label="Hello, world!" 7. insertbefore="sanitizeSeparator" 8. oncommand="window.openDialog( 'chrome://helloworld/content/clock.xul', 'Clock', 'chrome,centerscreen,modal');"/>

72. Step 4. Repackage the XPI

73. helloworld.xpi helloworld chrome overlay.xul install.rdf chrome.manifest content clock.xul clock.js

74. Install helloworld.xpi again

76. Let's try some localization

78. http://piro.sakura.ne.jp/ xul/doc/ 20070726keio/XUL3-3.zip

79. Step1. Add a locale package Step2. Modify chrome.manifest Step3. Modify XUL Step4. Repackage the XPI

80. Step 1. Add a locale package

81. helloworld chrome install.rdf chrome.manifest content locale en-US clock.dtd ja clock.dtd

82. clock.xul 1. 2. 3.<dialog id="..." 4. xmlns="..." 5. title="Clock" 6. buttons="..." 7. onload="..."> 8. <script type="..." 9. src="..."/> 10. 11. 12. 13. 14.

83. en-US/clock.dtd 1. 2.

84. ja/clock.dtd 1. 2.

85. Step 2. Modify chrome.manifest

86. chrome.manifest 1.content helloworld chrome/content/ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul 3.Locale helloworld en-US chrome/locale/en-US/ 4.locale helloworld ja chrome/locale/ja/

87. Part appended to chrome.manifest 3.locale helloworld en-US chrome/locale/en-US/ 4.locale helloworld ja chrome/locale/ja/

88. localehelloworld en-US chrome/locale/en-US/ locale helloworld ja chrome/locale/ja/ chrome://helloworld/loca le/ In English environments general.useragent.locale=en-US

89. localehelloworld en-US chrome/locale/en-US/ locale helloworld ja chrome/locale/ja/ chrome://helloworld/locale/ In Japanese environments general.useragent.locale=ja

90. Step 3. Modify XUL

91. clock.xul 1. 2. 3. 4.<dialog id="..." 5. xmlns="..." 6. title="&helloworld.clock;" 7. buttons="..." 8. onload="...">... 2. 3. 4. 5.

92. Step 4. Repackage the XPI

93. helloworld.xpi helloworld chrome install.rdf chrome.manifest content locale en-US ja

94. Install helloworld.xpi again

96. Adding a button to the Toolbar

98. http://piro.sakura.ne.jp/ xul/doc/ 20070726keio/XUL3-4.zip

99. Step1. Modify XUL Step2. Add a skin package Step3. Modify chrome.manifest Step4. Repackage the XPI

100. Step 1. Modify XUL

101. overlay.xul 1. 2.<overlay id="helloworldOverlay" 3. xmlns="http://www.mozilla.org/ keymaster/gatekeeper/there.is.only.xul"> 4. 5. <command id="helloworldCommand" 6. oncommand="window.openDialog( 'chrome://helloworld/content/clock.xul', 'Clock', 'chrome,centerscreen,modal');" 7. 8. 9. <toolbarbutton id="helloworldButton" 10. label="Hello, World!" 11. class="toolbarbutton-1" 12. command="helloworldCommand"/> 13. 14. 15. <menuitem id="helloworldMenuitem" 16. label="Hello, world!" 17. insertbefore="sanitizeSeparator" 18. command="helloworldCommand"/> 19. 20.

102. overlay.xul(1) ‏ 4. 5. <command id="helloworldCommand" 6. oncommand="window.openDialog( 'chrome://helloworld/content/clock.xul', 'Clock', 'chrome,centerscreen,modal');" 7.

103. overlay.xul(2) ‏ 8. 9. <toolbarbutton id="helloworldButton" 10. label="Hello, World!" 11. class="toolbarbutton-1" 12. command="helloworldCommand"/> 13.

104. overlay.xul(3) ‏ 15.<menuitem id="helloworldMenuitem" 16. label="Hello, world!" 17. insertbefore="sanitizeSeparator" 18. command="helloworldCommand"/>

105. Step 2. Add a skin package

106. helloworld chrome install.rdf chrome.manifest content locale classic icon.png skin icon-small.png overlay.css

107. icon.png icon-small.png 24×24 16×16 http://www.xuldev.org/misc/sd/icons.zip

108. overlay.css 1.#helloworldButton { 2. list-style-image: url("icon.png"); 3.} 4.toolbar[iconsize="small"] { 5. list-style-image: url("icon-small.png"); 6.}

109. Step 3. Modify chrome.manifest

110. chrome.manifest 1.content helloworld chrome/content/ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul 3.locale helloworld en-US chrome/locale/en-US/ 4.locale helloworld ja chrome/locale/ja/ 5.skin helloworld classic/1.0 chrome/skin/classic/ 6.style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css 7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css

111. chrome.manifest 1.content helloworld chrome/content/ 2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul 3.locale helloworld en-US chrome/locale/en-US/ 4.locale helloworld ja chrome/locale/ja/ 5.skin helloworld classic/1.0 chrome/skin/classic/ 6.style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css 7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css

112. chrome://helloworld/skin/ 5.skin helloworld classic/1.0 chrome/skin/classic/ Code added to chrome.manifest(1) ‏

113. 6.style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css Code added to chrome.manifest(2) ‏ browser.xul 1. 2. 3....

114. 7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css Code added to chrome.manifest(3) ‏ customizeToolbar.xul 1. 2. 3....

115. Step 4. Repackage the XPI

116. helloworld.xpi helloworld chrome install.rdf chrome.manifest content locale skin

117. Install helloworld.xpi again

119. Packaging using the jar format

120. http://piro.sakura.ne.jp/ xul/doc/ 20070726keio/XUL3-5.zip

121. Many extensions are packaged using this format

122. Benefits

123. 1. Saves disk space 2. JAR files can be digitally signed

124. Step1. Collect chrome folder contents into a jar file Step2. Modify chrome.manifest Step3. Repackage the XPI

125. Step 1. Collect chrome folder contents into a jar file

126. helloworld.jar helloworld chrome install.rdf chrome.manifest content locale skin

127. helloworld chrome helloworld.jar install.rdf chrome.manifest

128. Step 2. Modify chrome.manifest

129. chrome.manifest 1.contenthelloworld jar:chrome/helloworld.jar!/content/ 2.overlaychrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul 3.localehelloworld en-US jar:chrome/helloworld.jar!/locale/en-US/ 4.localehelloworld ja jar:chrome/helloworld.jar!/locale/ja/ 5.skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/classic/ 6.style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css 7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css

130. content helloworld chrome/content/ Modification to chrome.manifest(1) ‏ helloworld chrome chrome.manifest content

131. content helloworld jar:chrome/helloworld.jar!/content/ Modification to chrome.manifest(1) ‏ helloworld chrome chrome.manifest content helloworld.jar

132. locale helloworld en-US jar:chrome/helloworld.jar!/locale/en-US/ Modification to chrome.manifest(2) ‏ helloworld chrome chrome.manifest locale helloworld.jar en-US

133. locale helloworld ja jar:chrome/helloworld.jar!/locale/ja/ Modification to chrome.manifest(3) ‏ helloworld chrome chrome.manifest locale helloworld.jar ja

134. skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/classic/ Modification to chrome.manifest(4) ‏ helloworld chrome chrome.manifest skin helloworld.jar classic

135. Step 4. Repackage the XPI

136. helloworld.xpi helloworld chrome helloworld.jar install.rdf chrome.manifest

137. Install helloworld.xpi again