Labs/Extensions2/Examples: Difference between revisions
< Labs | Extensions2
Jump to navigation
Jump to search
No edit summary |
|||
| (One intermediate revision 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 == | == Content Filter == | ||
<pre> | <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
- ContextMenu
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>