I was playing with Prism recently, exploring how hard is to write an extension for it (the real motivation was actually to adapt my existing extension). It turned out to be quite easy process and since I haven't found a tutorial (even if there are some wiki pages here and here) how to write a first Prism extension, I decided to put one on my blog.
So, take a look at Hello Prism!
First of all, it isn't much different than writing an extension for Firefox. Both applications are based on XUL Runner and so, the logic is the same. However there are a few differences that are worth to be mentioned.
Let's start with the directory structure. It's simple and the same as in case of a Firefox extension. See here how it looks for the Hello World! Firefox/Firebug extension.
firstname.lastname@example.org/ chrome/ content/ helloprism/ helloprism.xul helloprism.js locale/ en-US/ helloprism.dtd helloprism.properties skin classic/ helloprism.png chrome.manifest install.rdf
The first difference is in the chrome.manifest file.
skin helloprism classic/1.0 chrome/skin/classic/
locale helloprism en-US chrome/locale/en-US/
overlay chrome://webrunner/content/webrunner.xul chrome://helloprism/content/helloprism.xul
The main window is represented by webrunner.xul and so we have to do our overlay for it. Notice that it was browser.xul in case of Firefox.
Further the install.rdf is different. The target application is Prism and so, we have to specify that.
<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<!-- Prism -->
<i:description>Example extension for Prism.</i:description>
<i:creator>Jan Odvarko (email@example.com)</i:creator>
The Hello Prism! overlay is defined in helloprism.xul file. And in order to make it a bit useful for development I have created two new menu items for the Prism's Tools menu (located at the right-bottom corner).
- Preferences (open a new window with about:config page)
- DOM Inspector (open DOM Inspector window)
Of course, DOM Inspector extension must be installed, if you want to use it. Honestly, it's so useful to have DOM Inspector in Prism, especially when you exploring the Prism UI at the beginning.
See how the helloprism.xul looks like.
<!--ENTITY % helloprismDTD SYSTEM "chrome://helloprism/locale/helloprism.dtd"-->
<overlay id="helloPrismOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<stringbundle id="strings_helloprism" src="chrome://helloprism/locale/helloprism.properties"/>
<!-- List of new commands -->
<!-- Tools menu customization -->
The JS implementation for the two commands is in separate helloprism.js file and looks like as follows:
if (typeof(inspectDOMDocument) == "undefined")
There is also one helper function that loads a string from localized string bundle (helloprism.properties file). It\'s used to get the error message if DOM Inspector extension isn\'t installed.
The extension can be downloaded here. In order to install an extension in Prism, open Add-ons dialog (Tools->Add-ons menu) and and use the Install... button.
Finally, a few links...
- Install Prism for Firefox v0.2 for Firefox 3.0b3pre or greater, Windows/Mac/Linux (yes, Prism is available as an firefox extension).
- The standalone version of Prism v0.9 is available for Windows (installer, archive), Mac and Linux
- Prism Forum