Chapter 3 Building your own Extensions. Development Environment

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>helloworld@piro.sakura.ne.jp</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>helloworld@piro.sakura.ne.jp</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