Eli Grey

Edit Page Jetpack Feature

I have created a Jetpack feature called Edit Page to see what developing a Jetpack feature would be like. As the name implies, it lets you edit any web page in one click. Right clicking on the Edit Page button added to the status bar toggles spellcheck. To change the default spellcheck preference for the Jetpack feature, go to about:config and search for the jetpacks.editpage.spellcheck boolean preference to toggle it. The following is the code I used to implement version 0.1 of the Jetpack feature:

While creating this Jetpack feature, I ran into various quirks in the Jetpack platform:

  • Jetpack features are handled as JavaScript 1.6 and not 1.8 even though Firefox supports JavaScript 1.8. Update: This is due to a Firefox 3.0.x bug that is fixed in Firefox 3.5.
  • An HTML status bar widget added with jetpack.statusBar.append() is a complete HTMLDocument but it doesn’t support any features that involve the id attribute, like document.getElementById() and CSS’s #id syntax. This may be fixable by including a doctype in the HTML (I didn’t because it’s invalid E4X) but the point is that this is an HTML snippet, which should default to some HTML or XHTML doctype.
  • jetpack.notifications.show() doesn’t allow skipping options (passing null or undefined) without falling back on defaults (Prism’s API, platform.showNotification(), allows it). The following code should fix the function to allow this kind of use:
jetpack.notifications.show = function (message) {
    var body = message,
    title = "Jetpack Notification",
    icon = null; // Mozilla favicon is http://www.mozilla.org/favicon.ico
    if (typeof message == "object") {
        body = message.body;
        if ("title" in message) {
            title = message.title;
        }
        if ("icon" in message) {
            icon = message.icon;
        }
    }
    try {
        Components.classes['@mozilla.org/alerts-service;1']
          .getService(Components.interfaces.nsIAlertsService)
          .showAlertNotification(icon, title, body);
        return true;
    } catch (e) {
        console.log("Unable to display notification:", message);
        return false;
    }
};

Leave a Reply