chapter 3 building your own extensions
DESCRIPTION
Chapter 3 Building your own Extensions. Development Environment. Must Haves ・Text Editor (UTF-8 compatible) ・File Archiver (ZIP compatible). Nice to Have ・ JavaScript debugger (Venkman) ・ Hidden preferences for development. Text Editor. Hidemaru Editor http://hide.maruo.co.jp/ - PowerPoint PPT PresentationTRANSCRIPT
Chapter 3Building your
own Extensions
Development Environment
Must Haves・ Text Editor ( UTF-8 compatible)・ File Archiver ( ZIP compatible)
Nice to Have・ JavaScript debugger ( Venkman)・ Hidden preferences for development
Text Editor
Hidemaru Editorhttp://hide.maruo.co.jp/
TeraPadhttp://www5f.biglobe.ne.jp/~t-susumu/
File Archiver
7-Ziphttp://www.7-zip.org/
Debugger
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
Hidden Preferences
・ browser.dom.window.dump.enabled Enables dump output to console → true
・ javascript.options.showInConsole Enables errors to be reported to console → true
Create a newprofile for development
work
・ 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
Now, on to actually building
an Extension
…… But
Try modifying the Firefox code first
C:\Program Files\Mozilla Firefox\chrome\browser.jar
Implementation steps for the
Firefox browser
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
Displaying a“Hello, world!!”
message
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
Restart Firefox
Display “Hello, world!!”
in the “Tools” menu
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
Restart Firefox
Turn these modifications into an
Extension
Upload your work toftp://sfc-ftp.ai3.net/~incoming/mozilla24-ws/
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-1.zip
Step1. Prepare files and foldersStep2. Create manifest fileStep3. Create XPI package
Preparing files and folders
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
Isolate the XULmodifications for
the overlay file
(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>
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>
Creating a manifest file
1install.rdfextensionmetadata
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>
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>
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}
2chrome.manifest
file path and designating overlay
chrome.manifest
1.content helloworld chrome/content/2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
chrome.manifest(1)
1.content helloworld chrome/content/
chrome://helloworld/content/
Chrome URL
chrome.manifest(2)
2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
browser.xul
chrome.manifest(2)
2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
browser.xul
overlay.xul
chrome.manifest(2)
2.overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
browser.xul
overlay.xulbrowser.xul
Creating theXPI package
Cross-Platform InstallPackage
Is just aZIP Archive
under the cover
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
helloworld.xpi
Now use thebrowser.jar
backed up earlier to install the
helloworld.xpi
Adding a clock feature
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-2.zip
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
Step 1.
Build the framework with
XUL
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
clock.xul
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>
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();">
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>
Step 2.
Build thelogic withJavaScript
helloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
clock.xul
clock.js
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.}
Step 3.Make the clock window
accessible from the menu
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');"/>
Step 4.Repackage
the XPI
helloworld.xpihelloworld
chrome
overlay.xul
install.rdf
chrome.manifest
content
clock.xul
clock.js
Install helloworld.xpi
again
Let's try somelocalization
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-3.zip
Step1. Add a locale package
Step2. Modify chrome.manifest
Step3. Modify XULStep4. Repackage the XPI
Step 1.Add a
locale package
helloworld
chrome
install.rdf
chrome.manifest
content
locale
en-US
clock.dtd
ja
clock.dtd
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>
en-US/clock.dtd
1.<!ENTITY helloworld.clock "Clock">2.<!ENTITY helloworld.clock.currentTime "Current Time:">
ja/clock.dtd
1.<!ENTITY helloworld.clock "時計 ">2.<!ENTITY helloworld.clock.currentTime "現在時刻: ">
Step 2.Modify
chrome.manifest
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/
Part appended to chrome.manifest
3.locale helloworld en-US chrome/locale/en-US/4.locale helloworld ja chrome/locale/ja/
locale helloworld en-US chrome/locale/en-US/locale helloworld ja chrome/locale/ja/
chrome://helloworld/locale/
In English environmentsgeneral.useragent.locale=en-US
locale helloworld en-US chrome/locale/en-US/locale helloworld ja chrome/locale/ja/
chrome://helloworld/locale/
In Japanese environmentsgeneral.useragent.locale=ja
Step 3.Modify XUL
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>
Step 4.Repackage
the XPI
helloworld.xpi
helloworld
chrome
install.rdf
chrome.manifest
content
locale
en-US
ja
Install helloworld.xpi
again
Adding a buttonto the Toolbar
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-4.zip
Step1. Modify XULStep2. Add a skin packageStep3. Modify
chrome.manifestStep4. Repackage the XPI
Step 1.Modify XUL
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>
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>
overlay.xul(2)
8.<toolbarpalette id="BrowserToolbarPalette">9. <toolbarbutton id="helloworldButton"10. label="Hello, World!"11. class="toolbarbutton-1"12. command="helloworldCommand"/>13.</toolbarpalette>
overlay.xul(3)
15.<menuitem id="helloworldMenuitem"16. label="Hello, world!"17. insertbefore="sanitizeSeparator"18. command="helloworldCommand"/>
Step 2.Add a
skin package
helloworld
chrome
install.rdf
chrome.manifest
content
locale
classic
icon.png
skin
icon-small.png
overlay.css
icon.png
icon-small.png
24×24
16×16
http://www.xuldev.org/misc/sd/icons.zip
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.}
Step 3.Modify
chrome.manifest
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
chrome://helloworld/skin/
5.skin helloworld classic/1.0 chrome/skin/classic/
Code added to chrome.manifest(1)
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....
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....
Step 4.Repackage
the XPI
helloworld.xpi
helloworld
chrome
install.rdf
chrome.manifest
content
locale
skin
Installhelloworld.xpi
again
Packaging using the jar format
http://piro.sakura.ne.jp/xul/doc/
20070726keio/XUL3-5.zip
Many extensions are packaged using
this format
Benefits
1. Saves disk space2. JAR files can
be digitally signed
Step1. Collect chrome folder contents into a jar file
Step2. Modify chrome.manifest
Step3. Repackage the XPI
Step 1.Collect chromefolder contentsinto a jar file
helloworld.jar
helloworld
chrome
install.rdf
chrome.manifest
content
locale
skin
helloworld
chrome
helloworld.jar
install.rdf
chrome.manifest
Step 2.Modify
chrome.manifest
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
content helloworld chrome/content/
Modification to chrome.manifest(1)
helloworld
chrome
chrome.manifest
content
content helloworld jar:chrome/helloworld.jar!/content/
Modification to chrome.manifest(1)
helloworld
chrome
chrome.manifest
content
helloworld.jar
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
locale helloworld ja jar:chrome/helloworld.jar!/locale/ja/
Modification to chrome.manifest(3)
helloworld
chrome
chrome.manifest
locale
helloworld.jar
ja
skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/classic/
Modification to chrome.manifest(4)
helloworld
chrome
chrome.manifest
skin
helloworld.jar
classic
Step 4.Repackage
the XPI
helloworld.xpi
helloworld
chrome
helloworld.jar
install.rdf
chrome.manifest
Installhelloworld.xpi
again