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 TeraPad

File Archiver

7-Zip

Debugger

Venkman JavaScript debugger Japanese language package blosxom.cgi/mozilla/extension/ _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 new profile 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.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

Displaying a “Hello, world!!” message

content\browser\browser.xul Add this to the end of the file

Restart Firefox

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

content\browser\browser.xul <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"/> <menuitem id="sanitizeItem" 944. accesskey="&clearPrivateDataCmd.accesskey;" 945. label="&clearPrivateDataCmd.label;" 946. key="key_sanitize" command="Tools:Sanitize"/> (snipped) ‏ Add this to the file

Restart Firefox

Turn these modifications into an Extension

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

xul/doc/ keio/XUL3-1.zip

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

Preparing files and folders

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

Isolate the XUL modifications for the overlay file

(snipped) ‏ <menu id="tools-menu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;"> (snipped) ‏ (snipped) ‏ (snipped) ‏ overlay.xul 1. 2.<overlay id="helloworldOverlay" 3. xmlns=" <menuitem id="helloworldMenuitem" 6. label="Hello, world!" 7. insertbefore="sanitizeSeparator"/> 8. 9.

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

Creating a manifest file

1 install.rdf extension metadata

install.rdf 1. 2.<RDF xmlns=" 3. xmlns:em=" Hellow, world! My first extension. 10. SHIMODA Hiroshi {ec8030f7-c20a-464f-9b0e-13a3a9e97384} *

install.rdf (1) ‏ 1. 2.<RDF xmlns=" 3. xmlns:em=" Hellow, world! My first extension. 10. SHIMODA Hiroshi 11.

install.rdf (2) ‏ {ec8030f7-c20a-464f-9b0e-13a3a9e97384} * IDs that can be assigned to target Application Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384} Thunderbird: {3550f703-e582-4d05-9a08-453d09bdfdc6}

2 chrome.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.xul browser.xul

Creating the XPI package

Cross-Platform Install Package

Is just a ZIP Archive under the cover

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

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

Adding a clock feature

xul/doc/ keio/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

<dialog id="clockDialog" 4. xmlns= " 5. title="Clock" 6. buttons="accept" 7. onload="initClock();"> 8. <script type="application/x-javascript" 9. src="clock.js"/>

clock.xul(1) ‏ <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"/>

Step 2. Build the logic with JavaScript

helloworld chrome overlay.xul install.rdf chrome.manifest content clock.xul 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.xpi helloworld chrome overlay.xul install.rdf chrome.manifest content clock.xul clock.js

Install helloworld.xpi again

Let's try some localization

xul/doc/ keio/XUL3-3.zip

Step1. Add a locale package Step2. Modify chrome.manifest Step3. Modify XUL Step4. 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.xul <dialog id="..." 4. xmlns="..." 5. title="Clock" 6. buttons="..." 7. onload="..."> 8. <script type="..." 9. src="..."/>

en-US/clock.dtd 1. 2.

ja/clock.dtd 1. 2.

Step 2. Modify chrome.manifest

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/

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

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

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

Step 3. Modify XUL

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

Step 4. Repackage the XPI

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

Install helloworld.xpi again

Adding a button to the Toolbar

xul/doc/ keio/XUL3-4.zip

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

Step 1. Modify XUL

overlay.xul 1. 2.<overlay id="helloworldOverlay" 3. xmlns=" keymaster/gatekeeper/there.is.only.xul"> <command id="helloworldCommand" 6. oncommand="window.openDialog( 'chrome://helloworld/content/clock.xul', 'Clock', 'chrome,centerscreen,modal');" <toolbarbutton id="helloworldButton" 10. label="Hello, World!" 11. class="toolbarbutton-1" 12. command="helloworldCommand"/> <menuitem id="helloworldMenuitem" 16. label="Hello, world!" 17. insertbefore="sanitizeSeparator" 18. command="helloworldCommand"/>

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

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

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

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

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

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

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

Step 4. Repackage the XPI

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

Install helloworld.xpi again

Packaging using the jar format

xul/doc/ keio/XUL3-5.zip

Many extensions are packaged using this format

Benefits

1. Saves disk space 2. 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 chrome folder contents into 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.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

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

Install helloworld.xpi again