Subscribe to RSS Feed

Extending Prism

by Honza

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! 😉

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.

helloprism@janodvarko.cz/
    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.

content  helloprism  chrome/content/
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#">
    <description about="urn:mozilla:install-manifest">
        <i:id>helloprism@janodvarko.cz</i:id>
        <i:version>0.1</i:version>
        <i:type>2</i:type>

        <!-- Prism -->
        <i:targetapplication>
            <description>
                <i:id>prism@developer.mozilla.org</i:id>
                <i:minversion>0.8</i:minversion>
                <i:maxversion>1.0.0.*</i:maxversion>
            </description>
        </i:targetapplication>

        <i:name>Hello Prism!</i:name>
        <i:description>Example extension for Prism.</i:description>
        <i:creator>Jan Odvarko (odvarko@gmail.com)</i:creator>
        <i:iconurl>chrome://helloprism/skin/helloprism.png</i:iconurl>
        <i:homepageurl>http://www.janodvarko.cz</i:homepageurl>
    </description>
</rdf>

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

Prism Tools Menu

  • 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"-->
%helloprismDTD;
]>

<overlay id="helloPrismOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script src="chrome://helloprism/content/helloPrism.js" type="application/x-javascript">
    <script type="application/x-javascript" src="chrome://inspector/content/hooks.js"/>

    <stringbundleset>
        <stringbundle id="strings_helloprism" src="chrome://helloprism/locale/helloprism.properties"/>
    </stringbundleset>

    <!-- List of new commands -->
    <commandset>
        <command id="cmd_hpPreferences"
                 label="&helloprism.preferences;"
                 oncommand="helloPrism.onPreferences()"/>

        <command id="cmd_hpDomInspector"
                 label="&helloprism.inspector;"
                 oncommand="helloPrism.onDomInspector()"/>

    </commandset>

    <!-- Tools menu customization -->
    <menu id="menu_tools">
        <menupopup id="popup_tools">
            <menuseparator/>
            <menuitem command="cmd_hpPreferences"/>
            <menuseparator/>
            <menuitem command="cmd_hpDomInspector"/>
        </menupopup>
    </menu>
</overlay>

The JS implementation for the two commands is in separate helloprism.js file and looks like as follows:

var helloPrism =
{
    onPreferences: function()
    {
        window.openDialog(\'about:config\');
    },
    onDomInspector: function()
    {
        if (typeof(inspectDOMDocument) == "undefined")
            alert(this.getText("helloprism.DOMInspector.error"));
        else
            inspectDOMDocument(content.document);
    },
    getText: function(name)
    {
        return document.getElementById("strings_helloprism").getString(name);
    }
};

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.

There are some troubles with Prism 0.9 and so, I am recommending to use Prism 0.9.1 (experimental) version (build available for Mac, Windows and Linux), which works fine for me.

Finally, a few links...


Rss Commenti

3 Comments

  1. I tried your extension w/ prism (standalone app build from the trunk) w/out success.

    no inspector entry appears under ->tools menu.

    #1 tony
  2. [...] and wants to do this, but not sure how to go about it, please read more in Jan Odvarko’s Extending Prism [...]

    #2 Mozilla Prism brings power to stand-alone web applications - Robert's talk
  3. [...] and wants to do this, but not sure how to go about it, please read more in Jan Odvarko’s Extending Prism [...]

    #3 Mozilla Prism brings power to stand-alone web applications | All about MICROSOFT

Sorry, the comment form is closed at this time.