My OperaCreating my first Opera Speed Dial extension
Monday, May 23, 2011 5:51:17 PM
Just wanted to document quickly what it took to create my first Speed Dial extension (don't forget about Daniel's excellent article as well).
The extension is simple—it just shows a portion of the first cell of the most recent Dinosaur Comics. There's only two files in this extension: a manifest document and an HTML file that serves as the host document for the background process of the extension.
We first create a bucket of variables, instantiate stuff, store references, etc.:
We jam the responseText into an off-document
This function creates a new image from the URL we passed in, and once that has finished loading draws it onto the
That's it. Mind blowingly awesome, I know. A fun exercise to get familiar with the Speed Dial extension API that probably took two hours. OK I'm lying, it took like three because I wasn't sure what it was even going to do. Feel free to grab the code in this gist. Now let's see if it gets approved. ^_^
config.xml
<?xml version="1.0"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://miketaylr.com/" defaultlocale="en" viewmodes="minimized">
<name short="Dino Comics">Dino Comics Preview</name>
<description>See the first panel of the most recent Dino Comics. Click through to read the rest!</description>
<access origin="http://www.qwantz.com" subdomains="true" />
<icon src="dino.png"/>
<author>Mike Taylor</author>
<feature name="opera:speeddial" required="false">
<param name="url" value="http://www.qwantz.com/index.php"/>
</feature>
</widget>
viewmodes="minimized" on the widget root element as well as the opera:speeddial feature element. The url param, with its corresponding value determine where the actual Speed Dial cell navigates to when someone clicks on it.
Also important is the access element where I'm telling the extension that it can fetch resources from qwantz.com.
The Code
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Dino Comics</title>
<canvas width="244" height="243" id="c"></canvas>
<style>
@media screen and (view-mode: minimized) {
canvas {-o-transform:translate(-3px, -5px);margin:0 auto;display:block;}
}
</style>
We first create a bucket of variables, instantiate stuff, store references, etc.:
var xhr = new XMLHttpRequest(),
ctx = document.getElementById('c').getContext('2d'),
url, dummy = document.createElement('div');
XMLHttpRequest to the mobile version of qwantz.com (I decided to use the mobile page just because it's simpler and easier to scrape). If everything is peachy, we send the content of the page (which is returned in the reponseText property of the XHR object) to the findURL function:
function findURL(response){
dummy.innerHTML = response;
url = /http.+png/.exec(dummy.querySelector('img').style.backgroundImage);
createImg(url);
}
We jam the responseText into an off-document
<div> so the browser will parse the HTML and we can use DOM methods to poke at it (in this case querySelector). We then run a fairly lazy RegEx on the content of the first image's inline style text to grab a reference to the PNG image of the comic. That gets passed off to the createImg function:
function createImg(url){
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = url;
}
This function creates a new image from the URL we passed in, and once that has finished loading draws it onto the
<canvas> of index.html. Et voilà:
That's it. Mind blowingly awesome, I know. A fun exercise to get familiar with the Speed Dial extension API that probably took two hours. OK I'm lying, it took like three because I wasn't sure what it was even going to do. Feel free to grab the code in this gist. Now let's see if it gets approved. ^_^
