Implementing a QR Code Reader as Firefox Extension Part 4

This is the next update of my work from the past few days. Did you already look forward to it? Well, hopefully you are going to be satisfied with my last blog entry (or at I least my intended last one).

I started to work on the functionality to parse different formats to interact with Skype, especially calling a phone number and showing a contact’s user info in order to add that user to the currently used Skype account. I did some careful consideration on how to realize that idea of mine.

At first, I thought about a method to access Skype with Adobe Air. But as I am using Firefox, which can handle URI schemes for itself, I dropped that idea in an instant. So because of that, it is quite comfortable for me, I just need to delegate the input to the browser, like to open a http link, and the rest is going to be done automatically.

After some research, I found that particular blog entry, which helped me to accomplish my goal: http://kirill-poletaev.blogspot.com/2010/09/skype-in-flash-actionscript-3.html

First of all, I considered to implement all of these functions – chat, call, add, sendfile, voicemail and userinfo – however, I thought that it would be better to show just the userinfo for all incoming parameters, except for calling the decoded user. So, it is still possible to call, chat and add it afterwards. For example, if the user decodes the QR code with a chat parameter, it is replaced with the one from the user info.

Here you can take a look at my new added functions:

private function identifyData(data:String):String {
var result:String = "empty";
if (data != "") {
btnSpriteOpen.visible = true;
btnTextData.visible = true;
var array:Array = data.split(":");
trace(array[0].toString().toLowerCase());
if (array.length > 1) {
if (array[0] == "http") {
result = data;
} else if (array[0] == "TEL") {
result = "skype:".concat(array[1]).concat("?call");
} else if (array[0] == "skype") {
var arrayName:Array = array[1].split("?");
if (arrayName.length > 0) {
if (arrayName.length > 1) {
if (arrayName[1] == "call") {
result = "skype:".concat(arrayName[0]).concat("?").concat(arrayName[1]);
} else {
// if input comes in like skype:name?add or ?chat or ?voicemail ... only show the userinfo
result = "skype:".concat(arrayName[0]).concat("?userinfo");
}
} else {
result = "skype:".concat(arrayName[0]).concat("?userinfo");
}
} else {
result = "skype:".concat(array[1]).concat("?userinfo");
}
} else {
btnSpriteOpen.visible = false;
btnTextData.visible = false;
}
}
}
trace(result);
return result;
}

private function getString(data:String):String {
var result:String = "";
if (data != "") {
var array:Array = data.split(":");
if (array[0] == "http") {
result = "Do you want to open that http link?";
} else if ((array[0] == "skype") && (array[1].substring((array[1].length -5), array[1].length)) == "?call") {
result = "Do you want to call that telephone via skype?";
} else if ((array[0] == "skype") && (array[1].substring((array[1].length -9), array[1].length)) == "?userinfo") {
result = "Do you want to add the user to your contacts?";
}
}
return result;
}

Generally speaking, I just added additional cases to the if-conditions. When the decoded string begins with “TEL”, a Skype call URI scheme will be returned. Moreover I specificated the same clause for incoming strings beginning with “skype”. The same procedure happens again in the method getString(data:String):String. There, I determined the message for the user, which depends on the input of the data string.

In fact, I could just delegate any URI scheme to the browser and let it handle the string. But I think that could lead to an unrecognized input and as a consequence of that to an error page. So I decided to show the decoded text only and let the user decide if he wants to copy the output into the browser’s address bar. After some tests everything worked perfectly fine.

Finally I released a *.xpi archive including the *.swf file, which is embedded as html with XUL. In order to do that I was searching for a suitable article and found that one: http://www.alistapart.com/articles/flashsatay . It helped me during the implementation.
I added the following into flash.xul:

<vbox>
<box>
<html:object>
<html:embed src=”QrCodeReader.swf” quality=”high” width=”350″
height=”350″ name=”movie” type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</html:object>
</box>
<description flex=”1″>&separate.label;</description>
<button label=”&close.label;” oncommand=”close();”/>
</vbox>

Here, I create a vertical box with three elements: another box with the embedded html object, a description field and a close button.
At the end I changed the folder structure and the chrome.manifest file before packaging it into a *.xpi file. A guidance can be found here:

http://kb.mozillazine.org/Getting_started_with_extension_development#Packaging

Finally, that’s it. I hope my English wasn’t too bad, and of course please watch my demonstration video!

, , , , , ,
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • StumbleUpon
  • Twitter

One Comment

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>