Labs/Extensions2/Examples: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(New page: <html> <head> <title>Content Filter Extension</title> <!-- TODO: Meta Data --> <script> Ent.Privileges.request( "Modify DOM" ); </script> </head> <body> <script class="exten...)
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
== 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 ==
<pre>
<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>
</pre>
== Content Filter ==
<pre>
<html>
<html>
<head>
<head>
Line 19: Line 95:
</body>
</body>
</html>
</html>
</pre>


== Snapshot ==


 
<pre>
<html>
<html>
<head>
<head>
Line 76: Line 154:
</body>
</body>
</html>
</html>
</pre>

Latest revision as of 06:05, 30 January 2009

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>
Retrieved from "https://wiki.allizom.org/index.php?title=Labs/Extensions2/Examples&oldid=126233"