User:Aza/VapourExamples
From MozillaWiki
< User:Aza
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>
