chapter 3 building your own extensions. development environment
TRANSCRIPT
![Page 1: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/1.jpg)
Chapter 3Building your
own Extensions
![Page 2: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/2.jpg)
Development Environment
![Page 3: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/3.jpg)
Must Haves・ Text Editor ( UTF-8 compatible)・ File Archiver ( ZIP compatible)
![Page 4: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/4.jpg)
Nice to Have・ JavaScript debugger ( Venkman)・ Hidden preferences for development
![Page 5: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/5.jpg)
Text Editor
![Page 6: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/6.jpg)
Hidemaru Editorhttp://hide.maruo.co.jp/
TeraPadhttp://www5f.biglobe.ne.jp/~t-susumu/
![Page 7: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/7.jpg)
File Archiver
![Page 8: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/8.jpg)
7-Ziphttp://www.7-zip.org/
![Page 9: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/9.jpg)
Debugger
![Page 10: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/10.jpg)
VenkmanJavaScript debugger
https://addons.mozilla.org/firefox/216
Japanese language packagehttp://piro.sakura.ne.jp/latest/
blosxom.cgi/mozilla/extension/2005-09-30_venkman-ja.htm
![Page 11: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/11.jpg)
Hidden Preferences
![Page 12: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/12.jpg)
・ browser.dom.window.dump.enabled Enables dump output to console → true
・ javascript.options.showInConsole Enables errors to be reported to console → true
![Page 13: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/13.jpg)
Create a newprofile for development
work
![Page 14: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/14.jpg)
・ 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
![Page 15: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/15.jpg)
![Page 16: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/16.jpg)
Now, on to actually building
an Extension
![Page 17: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/17.jpg)
…… But
![Page 18: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/18.jpg)
Try modifying the Firefox code first
![Page 19: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/19.jpg)
C:\Program Files\Mozilla Firefox\chrome\browser.jar
![Page 20: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/20.jpg)
![Page 21: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/21.jpg)
Implementation steps for the
Firefox browser
![Page 22: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/22.jpg)
Step1. Extract browser.jarStep2. Modify browser.xulStep3. Compress browser.jarStep4. Double check
* It's a good idea to back up a copy of browser.jar
![Page 23: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/23.jpg)
Displaying a“Hello, world!!”
message
![Page 24: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/24.jpg)
content\browser\browser.xul
1388. <menuitem observes="blockedPopupAllowSite"/>1389. <menuitem observes="blockedPopupEditSettings"/>1390. <menuitem observes="blockedPopupDontShowMessage"/>1391. <menuseparator observes="blockedPopupsSeparator"/>1392. </menupopup>1393. </statusbarpanel>1394. </statusbar>
1395. <label value="Hello, world!!"/>
1396.</window>
Add this to the end of the file
![Page 25: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/25.jpg)
Restart Firefox
![Page 26: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/26.jpg)
![Page 27: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/27.jpg)
Display “Hello, world!!”
in the “Tools” menu
![Page 28: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/28.jpg)
content\browser\browser.xul931.<menu id="tools-menu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;">932. <menupopup id="menu_ToolsPopup">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. <menuitem id="hellloworldMenuitem" label="Hello, world!"/>
942. <menuseparator id="sanitizeSeparator"/>943. <menuitem id="sanitizeItem"944. accesskey="&clearPrivateDataCmd.accesskey;"945. label="&clearPrivateDataCmd.label;"946. key="key_sanitize" command="Tools:Sanitize"/> (snipped)943. </menupopup>944.</menu>
Add this to the file
![Page 29: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/29.jpg)
Restart Firefox
![Page 30: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/30.jpg)
![Page 31: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/31.jpg)
![Page 32: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/32.jpg)
Turn these modifications into an
Extension
![Page 33: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/33.jpg)
Upload your work toftp://sfc-ftp.ai3.net/~incoming/mozilla24-ws/
![Page 34: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/34.jpg)
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-1.zip
![Page 35: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/35.jpg)
Step1. Prepare files and foldersStep2. Create manifest fileStep3. Create XPI package
![Page 36: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/36.jpg)
Preparing files and folders
![Page 37: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/37.jpg)
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
![Page 38: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/38.jpg)
Isolate the XULmodifications for
the overlay file
![Page 39: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/39.jpg)
(snipped)<menu id="tools-menu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;"> <menupopup id="menu_ToolsPopup"> (snipped) <menuitem id="hellloworldMenuitem" label="Hello, world!"/> (snipped) </menupopup></menu>(snipped)
overlay.xul1.<?xml version="1.0" encoding="UTF-8"?>2.<overlay id="helloworldOverlay"3. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">4. <menupopup id="menu_ToolsPopup">5. <menuitem id="helloworldMenuitem"6. label="Hello, world!"7. insertbefore="sanitizeSeparator"/>8. </menupopup>9.</overlay>
![Page 40: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/40.jpg)
overlay.xul1.<?xml version="1.0" encoding="UTF-8"?>2.<overlay id="helloworldOverlay"3.xmlns="http://www.mozilla.org/ keymaster/gatekeeper/there.is.only.xul">
4. <menupopup id="menu_ToolsPopup">
5. <menuitem id="helloworldMenuitem"6. label="Hello, world!"7. insertbefore="sanitizeSeparator"/>
8. </menupopup>
9.</overlay>
![Page 41: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/41.jpg)
Creating a manifest file
![Page 42: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/42.jpg)
1install.rdfextensionmetadata
![Page 43: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/43.jpg)
install.rdf1.<?xml version="1.0" encoding="UTF-8"?>2.<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"3. xmlns:em="http://www.mozilla.org/2004/em-rdf#">4. <Description about="urn:mozilla:install-manifest">5. <em:id>[email protected]</em:id>6. <em:type>2</em:type>7. <em:name>Hellow, world!</em:name>8. <em:version>0.1</em:version>9. <em:description>My first extension.</em:description>10. <em:creator>SHIMODA Hiroshi</em:creator>11. <em:homepageURL>http://piro.sakura.ne.jp/xul/
</em:homepageURL>12. <em:targetApplication>13. <Description>14. <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>15. <em:minVersion>2.0</em:minVersion>16. <em:maxVersion>2.0.0.*</em:maxVersion>17. </em:targetApplication>18. </Description>19.</RDF>
![Page 44: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/44.jpg)
install.rdf (1)1.<?xml version="1.0" encoding="UTF-8"?>2.<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"3. xmlns:em="http://www.mozilla.org/2004/em-rdf#">4. <Description about="urn:mozilla:install-manifest">5. <em:id>[email protected]</em:id>6. <em:type>2</em:type>7. <em:name>Hellow, world!</em:name>8. <em:version>0.1</em:version>9. <em:description>My first extension.
</em:description>10. <em:creator>SHIMODA Hiroshi</em:creator>11. <em:homepageURL> http://piro.sakura.ne.jp/xul/ </em:homepageURL>
![Page 45: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/45.jpg)
install.rdf (2)
12. <em:targetApplication>13. <Description>14. <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
</em:id>15. <em:minVersion>2.0</em:minVersion>16. <em:maxVersion>2.0.0.*</em:maxVersion>17. </em:targetApplication>18. </Description>19.</RDF>
IDs that can be assigned to target ApplicationFirefox : {ec8030f7-c20a-464f-9b0e-13a3a9e97384}Thunderbird : {3550f703-e582-4d05-9a08-453d09bdfdc6}
![Page 46: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/46.jpg)
2chrome.manifest
file path and designating overlay
![Page 47: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/47.jpg)
chrome.manifest
1.content helloworld chrome/content/2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
![Page 48: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/48.jpg)
chrome.manifest(1)
1.content helloworld chrome/content/
chrome://helloworld/content/
Chrome URL
![Page 49: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/49.jpg)
chrome.manifest(2)
2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
browser.xul
![Page 50: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/50.jpg)
chrome.manifest(2)
2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
browser.xul
overlay.xul
![Page 51: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/51.jpg)
chrome.manifest(2)
2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
browser.xul
overlay.xulbrowser.xul
![Page 52: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/52.jpg)
Creating theXPI package
![Page 53: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/53.jpg)
Cross-Platform InstallPackage
![Page 54: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/54.jpg)
Is just aZIP Archive
under the cover
![Page 55: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/55.jpg)
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
helloworld.xpi
![Page 56: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/56.jpg)
Now use thebrowser.jar
backed up earlier to install the
helloworld.xpi
![Page 57: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/57.jpg)
![Page 58: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/58.jpg)
Adding a clock feature
![Page 59: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/59.jpg)
![Page 60: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/60.jpg)
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-2.zip
![Page 61: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/61.jpg)
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
![Page 62: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/62.jpg)
Step 1.
Build the framework with
XUL
![Page 63: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/63.jpg)
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
clock.xul
![Page 64: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/64.jpg)
clock.xul1.<?xml version="1.0" encoding="UTF-8"?>2.<?xml-stylesheet href="chrome://global/skin/"?>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. <hbox align="center">11. <label value="Current Time:"/>12. <textbox id="currentTime"/>13. </hbox>14.</dialog>
![Page 65: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/65.jpg)
clock.xul(1)
1.<?xml version="1.0" encoding="UTF-8"?>2.<?xml-stylesheet href="chrome://global/skin/"?>3.<dialog id="clockDialog"4. xmlns="..."5. title="Clock"6. buttons="accept"7. onload="initClock();">
![Page 66: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/66.jpg)
clock.xul(2)
8.<script type="application/x-javascript"9. src="clock.js"/>10. <hbox align="center">11. <label value="Current Time:"/>12. <textbox id="currentTime"/>13. </hbox>14.</dialog>
![Page 67: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/67.jpg)
Step 2.
Build thelogic withJavaScript
![Page 68: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/68.jpg)
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
clock.xul
clock.js
![Page 69: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/69.jpg)
clock.js
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.}
![Page 70: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/70.jpg)
Step 3.Make the clock window
accessible from the menu
![Page 71: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/71.jpg)
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');"/>
![Page 72: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/72.jpg)
Step 4.Repackage
the XPI
![Page 73: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/73.jpg)
helloworld.xpihelloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
clock.xul
clock.js
![Page 74: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/74.jpg)
Install helloworld.xpi
again
![Page 75: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/75.jpg)
![Page 76: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/76.jpg)
Let's try somelocalization
![Page 77: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/77.jpg)
![Page 78: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/78.jpg)
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-3.zip
![Page 79: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/79.jpg)
Step1. Add a locale package
Step2. Modify chrome.manifest
Step3. Modify XULStep4. Repackage the XPI
![Page 80: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/80.jpg)
Step 1.Add a
locale package
![Page 81: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/81.jpg)
helloworld
chrome
install.rdf
chrome.manifest
content
locale
en-US
clock.dtd
ja
clock.dtd
![Page 82: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/82.jpg)
clock.xul1.<?xml ..."?>2.<?xml-stylesheet ...?>3.<dialog id="..."4. xmlns="..."5. title="Clock"6. buttons="..."7. onload="...">8. <script type="..."9. src="..."/>10. <hbox align="...">11. <label value="Current Time:"/>12. <textbox id="..."/>13. </hbox>14.</dialog>
![Page 83: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/83.jpg)
en-US/clock.dtd
1.<!ENTITY helloworld.clock "Clock">2.<!ENTITY helloworld.clock.currentTime "Current Time:">
![Page 84: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/84.jpg)
ja/clock.dtd
1.<!ENTITY helloworld.clock "時計 ">2.<!ENTITY helloworld.clock.currentTime "現在時刻: ">
![Page 85: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/85.jpg)
Step 2.Modify
chrome.manifest
![Page 86: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/86.jpg)
chrome.manifest
1.content helloworld chrome/content/2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul3.Locale helloworld en-US chrome/locale/en-US/4.locale helloworld ja chrome/locale/ja/
![Page 87: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/87.jpg)
Part appended to chrome.manifest
3.locale helloworld en-US chrome/locale/en-US/4.locale helloworld ja chrome/locale/ja/
![Page 88: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/88.jpg)
locale helloworld en-US chrome/locale/en-US/locale helloworld ja chrome/locale/ja/
chrome://helloworld/locale/
In English environmentsgeneral.useragent.locale=en-US
![Page 89: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/89.jpg)
locale helloworld en-US chrome/locale/en-US/locale helloworld ja chrome/locale/ja/
chrome://helloworld/locale/
In Japanese environmentsgeneral.useragent.locale=ja
![Page 90: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/90.jpg)
Step 3.Modify XUL
![Page 91: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/91.jpg)
clock.xul
1.<?xml ..."?>2.<!DOCTYPE dialog SYSTEM "chrome://helloworld/locale/clock.dtd">3.<?xml-stylesheet ...?>4.<dialog id="..."5. xmlns="..."6. title="&helloworld.clock;"7. buttons="..."8. onload="...">...2. <hbox align="...">3. <label value= "&helloworld.clock.currentTime;"/>4. <textbox id="..."/>5. </hbox>
![Page 92: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/92.jpg)
Step 4.Repackage
the XPI
![Page 93: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/93.jpg)
helloworld.xpi
helloworld
chrome
install.rdf
chrome.manifest
content
locale
en-US
ja
![Page 94: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/94.jpg)
Install helloworld.xpi
again
![Page 95: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/95.jpg)
![Page 96: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/96.jpg)
Adding a buttonto the Toolbar
![Page 97: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/97.jpg)
![Page 98: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/98.jpg)
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-4.zip
![Page 99: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/99.jpg)
Step1. Modify XULStep2. Add a skin packageStep3. Modify
chrome.manifestStep4. Repackage the XPI
![Page 100: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/100.jpg)
Step 1.Modify XUL
![Page 101: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/101.jpg)
overlay.xul1.<?xml version="1.0" encoding="UTF-8"?>2.<overlay id="helloworldOverlay"3. xmlns="http://www.mozilla.org/ keymaster/gatekeeper/there.is.only.xul">4. <commandset id="mainCommandSet">5. <command id="helloworldCommand"6. oncommand="window.openDialog( 'chrome://helloworld/content/clock.xul', 'Clock', 'chrome,centerscreen,modal');"7. </commandset>8. <toolbarpalette id="BrowserToolbarPalette">9. <toolbarbutton id="helloworldButton"10. label="Hello, World!"11. class="toolbarbutton-1"12. command="helloworldCommand"/>13. </toolbarpalette>14. <menupopup id="menu_ToolsPopup">15. <menuitem id="helloworldMenuitem"16. label="Hello, world!"17. insertbefore="sanitizeSeparator"18. command="helloworldCommand"/>19. </menupopup>20.</overlay>
![Page 102: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/102.jpg)
overlay.xul(1)
4.<commandset id="mainCommandSet">5. <command id="helloworldCommand"6. oncommand="window.openDialog( 'chrome://helloworld/content/clock.xul', 'Clock', 'chrome,centerscreen,modal');"7.</commandset>
![Page 103: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/103.jpg)
overlay.xul(2)
8.<toolbarpalette id="BrowserToolbarPalette">9. <toolbarbutton id="helloworldButton"10. label="Hello, World!"11. class="toolbarbutton-1"12. command="helloworldCommand"/>13.</toolbarpalette>
![Page 104: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/104.jpg)
overlay.xul(3)
15.<menuitem id="helloworldMenuitem"16. label="Hello, world!"17. insertbefore="sanitizeSeparator"18. command="helloworldCommand"/>
![Page 105: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/105.jpg)
Step 2.Add a
skin package
![Page 106: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/106.jpg)
helloworld
chrome
install.rdf
chrome.manifest
content
locale
classic
icon.png
skin
icon-small.png
overlay.css
![Page 107: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/107.jpg)
icon.png
icon-small.png
24×24
16×16
http://www.xuldev.org/misc/sd/icons.zip
![Page 108: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/108.jpg)
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.}
![Page 109: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/109.jpg)
Step 3.Modify
chrome.manifest
![Page 110: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/110.jpg)
chrome.manifest1.content helloworld chrome/content/2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul3.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.css7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css
![Page 111: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/111.jpg)
chrome://helloworld/skin/
5.skin helloworld classic/1.0 chrome/skin/classic/
Code added to chrome.manifest(1)
![Page 112: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/112.jpg)
6.style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css
Code added to chrome.manifest(2)
browser.xul
1.<?xml version="1.0" encoding="UTF-8"?>2.<?xml-stylesheet href="chrome://helloworld/skin/overlay.css"?>3....
![Page 113: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/113.jpg)
7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css
Code added to chrome.manifest(3)
customizeToolbar.xul
1.<?xml version="1.0" encoding="UTF-8"?>2.<?xml-stylesheet href="chrome://helloworld/skin/overlay.css"?>3....
![Page 114: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/114.jpg)
Step 4.Repackage
the XPI
![Page 115: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/115.jpg)
helloworld.xpi
helloworld
chrome
install.rdf
chrome.manifest
content
locale
skin
![Page 116: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/116.jpg)
Installhelloworld.xpi
again
![Page 117: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/117.jpg)
![Page 118: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/118.jpg)
Packaging using the jar format
![Page 119: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/119.jpg)
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-5.zip
![Page 120: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/120.jpg)
Many extensions are packaged using
this format
![Page 121: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/121.jpg)
Benefits
![Page 122: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/122.jpg)
1. Saves disk space2. JAR files can
be digitally signed
![Page 123: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/123.jpg)
Step1. Collect chrome folder contents into a jar file
Step2. Modify chrome.manifest
Step3. Repackage the XPI
![Page 124: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/124.jpg)
Step 1.Collect chromefolder contentsinto a jar file
![Page 125: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/125.jpg)
helloworld.jar
helloworld
chrome
install.rdf
chrome.manifest
content
locale
skin
![Page 126: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/126.jpg)
helloworld
chrome
helloworld.jar
install.rdf
chrome.manifest
![Page 127: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/127.jpg)
Step 2.Modify
chrome.manifest
![Page 128: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/128.jpg)
chrome.manifest
1.content helloworld jar:chrome/helloworld.jar!/content/2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul3.locale helloworld en-US
jar:chrome/helloworld.jar!/locale/en-US/4.locale helloworld 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.css7.style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css
![Page 129: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/129.jpg)
content helloworld chrome/content/
Modification to chrome.manifest(1)
helloworld
chrome
chrome.manifest
content
![Page 130: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/130.jpg)
content helloworld jar:chrome/helloworld.jar!/content/
Modification to chrome.manifest(1)
helloworld
chrome
chrome.manifest
content
helloworld.jar
![Page 131: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/131.jpg)
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
![Page 132: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/132.jpg)
locale helloworld ja jar:chrome/helloworld.jar!/locale/ja/
Modification to chrome.manifest(3)
helloworld
chrome
chrome.manifest
locale
helloworld.jar
ja
![Page 133: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/133.jpg)
skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/classic/
Modification to chrome.manifest(4)
helloworld
chrome
chrome.manifest
skin
helloworld.jar
classic
![Page 134: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/134.jpg)
Step 4.Repackage
the XPI
![Page 135: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/135.jpg)
helloworld.xpi
helloworld
chrome
helloworld.jar
install.rdf
chrome.manifest
![Page 136: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/136.jpg)
Installhelloworld.xpi
again
![Page 137: Chapter 3 Building your own Extensions. Development Environment](https://reader030.vdocument.in/reader030/viewer/2022032415/56649f005503460f94c15bee/html5/thumbnails/137.jpg)