Labs/Extensions2/Examples

Possible API

ext = Extensions.get(version)

ext.Chrome
- ContextMenu
  - add
  - get
  - list
  - remove
- StatusBarIcon
  - add
  - list
  - remove
  - get
- UrlBarIcon
  - add
  - list
  - remove
  - get

Ent.Chrome.

Weather

<addon>
  <style>
    #weatherBadge{ opacity: 0.9; }
    #weatherBadge:hover{ opacity: 1.0; }
    
    #weatherPanel{ background: transparent; /* more css here */ }
  </style>
  
  <button id="weatherBadge" img="sun.png">
  
  <div id="weatherPanel">
    <!-- Pretty pretty mockup here -->
  </div>
  
  
  <script>
    Browser.load(function(){
      JetPack.UI.statusBar
        .add("#weatherBadge");
        .hover( showWeatherPanel );
      
      setInterval( updateWeatherBadge, 60*60 );
    })
    
    function updateWeatherBadge(){
      var weatherApiUrl = "http://...";
      
      JetPack.ajax( weatherApiUrl, function(data){
        jQuery("#weatherBadge").attr({
         "img", data.weather.img,
         "text", data.weather.forecast
        });
        
        jQuery("#weatherPanel")... /* update the panel */
      });
      
    }
    
    function showWeatherPanel(){
      this.showPanel("#weatherPanel", {y:"+5px"})
    }
    
  </script>
</addon>

Content Filter

<html>
<head>
  <title>Content Filter Extension</title>
  <!-- TODO: Meta Data -->
  <script>
    Ent.Privileges.request( "Modify DOM" );
  </script>
</head>

<body>
  <script class="extension">
    Ent.onPageLoad(function( page ){
      jQuery("img", page).css({
        "-moz-transform": "rotate(180deg)"
      })
    });
  </script>

</body>
</html>

Snapshot

<html>
<head>
  <title>Screen Capture Extension</title>
  <author>
    <name>Aza Raskin</name>
    <email>aza@mozilla.com</email>
  </author>
  <license>MPL</license>
  <script>
    Ent.Privileges.request( "Add to Chrome", "Write File" );  
  </script>  
</head>

<body>
  <div id="status-bar-icon">
    <img src="myIcon.png"/>
  </div>
  
  <script class="extension">
    function captureScreen(){
      win = Ent.getFocusedWindow();
      hiddenWin = Ent.getHiddenWindow();
      var thumbnail = hiddenWin.document.createElementNS(
        "http://www.w3.org/1999/xhtml", "canvas" );

      /* ... */

      ctx.drawWindow(win, win.scrollX, win.scrollY,
                     win.innerWidth, win.innerWidth, "rgb(255,255,255)");

      var data = thumbnail.toDataURL("image/jpeg", "quality=80");

      var f = Ent.Files.open( "thumbnail.jpg", "w" )
      f.write( data );
      f.close();
      
    }

    function captureWebPage(){
      /* capture screen */
    }  
  
    jQuery("#status-bar-icon").click(function(){
      Ent.showContextMenu({
        "Capture screen": captureScreen,
        "Capture web page": captureWebPage,
      });
    });
    
    Ent.Chrome.addToStatusBar( "#status-bar-icon" );
  </script>

</body>
</html>