Jetpack



Adding to the Firefox UI

Approach

Capabilities

Core UI Modules

Context-menu

Context-menu Example

    let contextMenu = require('context-menu');
    contextMenu.Item({
      label: 'Search Stack Overflow',
      image: require('self').data.url('favicon.ico'),
      context: contextMenu.SelectionContext(),
      contentScript: 'self.on("click", self.postMessage);',
      onMessage: function () {
        let selection = require('selection').text;
        let url = 'http://stackoverflow.com/search?q=' + selection;
        require('tabs').open(url);
      }
    });

Context-menu Example - Breakdown

  1. image: require('self').data.url('favicon.ico')
    An image to show adjacent to the label.
  2. context: contextMenu.SelectionContext()
    Only show menu item if there is a selection.
  3. contentScript: 'self.on("click", self.postMessage);',
    Handle the click on the context menu.
  4. let selection = require('selection').text;
    Get the selected text in the web page.
  5. require('tabs').open(url);
    Open the search results in a new tab.

Widget

Widget Example

    // extended version: dynamically update w/ number of posts
    require("widget").Widget({
      id: "StackOverflowJetpack",
      label: "Stack Overflow Search - Jetpack",
      contentURL: require('self').data.url('favicon.ico'),
      onClick: function() {
        require('tabs').open('http://stackoverflow.com/search?q=jetpack');
      }
    });

Widget Example - Breakdown

  1. id: "StackOverflowJetpack",
    Required for customization
  2. label: "Stack Overflow Search - Jetpack",
    Optional, shows in the tooltip
  3. contentURL: require('self').data.url('favicon.ico'),
    Visible content of the widget - text, image or URL
  4. require('tabs').open('http://stackoverflow.com/search?q=jetpack');
    Open the URL in a new tab

Panel

Panels are fun.

    * screenshot: reddit panel
    * screenshot: peek
    * screenshot: wikipedia treemap

Panel Example

    var panel = require("panel").Panel({
      contentURL: 'http://stackoverflow.com/search?q=jetpack'
    });

    require("widget").Widget({
      id: "StackOverflowJetpack",
      label: "Stack Overflow Search - Jetpack",
      contentURL: require('self').data.url('favicon.ico'),
      panel: panel
    });

Panel Example - Breakdown

  1. contentURL: 'http://stackoverflow.com/search?q=jetpack'
    The visible contents of the panel. Can be a remote or local URL.
  2. require("widget").Widget({ panel: panel
    Link the panel to the Widget. Triggered by clicking.

Notifications

Notifications Example

    require("notifications").notify({
      text: "New Stack Overflow Question!",
      iconURL: require('self').data.url('favicon.ico')
    });

Notifications Example - Breakdown

  1. text: "New Stack Overflow Question!",
    The text to show in the notification
  2. iconURL: require('self').data.url('favicon.ico')
    The URL of the image to show in the notification

Advanced Notifications Example

    var count = 0;
    require('timers').setInterval(function() {
      require('page-worker').Page({
        contentURL: 'http://stackoverflow.com/search?q=jetpack',
        contentScript: 'self.postMessage({count: document.querySelector(".summarycount")});',
        onMessage: function(msg) {
          if (msg.count > count) {
            require('notifications').notify({
              text: 'New Stack Overflow Question: ' + msg.count,
              iconURL: require('self').data.url('favicon.ico')
            });
          }
          this.destroy();
        }
      });
    }, 5 * 60 * 1000);

Other/Future UI

DIY UI

THANKS