Loading...
[-]

Chrome Extension – Arbitrary Web Slices

Chrome Extension IconTo see how Chrome Extensions work I revisited my Arbitrary Web Slices post.  A great starting point was Google’s own Hello World extension.  Indeed all I really needed to do was start with that, cut and paste code from my other post, add some icons and it was done.

Let’s start with the barely edited (from Google’s sample) manifest.json file:

{
  "name": "Perth BOM Forecast",
  "version": "1.0",
  "description": "Slice the 7 day forecast out of the Bureau of Meterology webpage",
  "icons": {"128": "bomlogo.jpg" },
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "http://www.bom.gov.au/"
  ]
}

The only addition there is to add “icons” which sets the icon shown on the extensions page. The most important modification is to set the permissions to allow us to use cross site scripting so we can get to the BOM page. For more information on what goes into manifest files take a look a Google’s help.

Next we take a look at the very simple code used to take the slice we want from the page and display it.

1)  Import jQuery from the Google CDN
2)  Make an AJAX call to the BOM website
3)  Display the results

Here’s the popup.html code which does the work:

<style>
body{ overflow:hidden; } // Hide scrollbars
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var url = "http://www.bom.gov.au/weather/wa/forecasts/perth.shtml";

function loadForecast() {
	$.ajax({ url: url, context: document.body, success: function(html){
		$bom = $(html).find("DIV#content");
        $(this).find("DIV#content").html($bom.html());
	}});
}

$(document).ready(function() {
	setTimeout(loadForecast,1);
});
</script>
<body>
<div id="content">
Loading...
</div>
</body>

The loadForecast function takes the slice and loads it. Note that instead of calling loadForecast directly I’ve used a setTimeout with a 1 ms timeout to cause Chrome to render the partially completed page with a loading message to let the user know something is going on. For a page which takes a bit longer to load you might want consider a proper ProgressBar or an AJAX spinner.

That’s all that you need! You can download the files, then use the “Load unpacked extension…” to load the unpacked version or alternately simply click here to load the packed version. Feel free to take this simple example and create your own WebSlice chrome extension. Don’t forget to publish your work in the extensions gallery.

You might also be interested in: Chrome Extension – Transperth Live Train Times

2 Trackbacks

  1. By Arbitrary Web Slices – Cheesy Code on April 5, 2010 at 14:57

    [...] also: Chrome Extension – Arbitrary Web Slices This entry was written by AndrewCocks, posted on February 28, 2010 at 22:35, filed under jQuery. [...]

  2. [...] Cheesy Code Programming in C, C++ and C# Skip to content AboutPrivacy Loading… [-] « Chrome Extension – Arbitrary Web Slices [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*