Developer's Blog

Create extensions in just 15 minutes – The Sleipnir Mobile for Android 2.0 Beta extensions tutorial

The use of extensions to freely customize web pages has recently become available since the release of Sleipnir Mobile for Android 2.0 Beta.

Extensions can be easily created if you already know JavaScript. Even a beginner like me who has only used JavaScript with bookmarklets was able to easily create one, so you can too!

So, I have explained a little about how to create extensions in the following tutorial.

Sleipnir Mobile Beta in the Android Market

Extensions Gallery

To start with

Let’s try creating the [Sleipnir Start Simplifier] extension to make the mobile version of Sleipnir Start simpler. Only the minimal necessities are included in the explanation, so for more details please visit the Extension Development Page of the Extension Gallery. The development will be conducted on a PC.

Creating the source file

Extensions are made up of one source file. It is required to save the file name in the format: [*.slex.js]. The file to be created this time will use the file name: [sss.slex.js].

Inputting the meta data(extension information)

Before writing the code, let us input the meta data. Meta data is the information used for extensions. Meta data is inputted as a comment in the source file.

The block surrounded by [// UserScript] and [// /UserScript] is recognized as the meta data. The following data is to be inputted.

– @name [Extension name]
– @author [Author name]
– @description [Extension description]
– @include [Execution target URL]
– @version [Version number]
– @require [Function to execute script]
This time, we will be creating an extension using jQuery, so we should set @require jquery to be able to use jQuery.

Programming

Let’s cut down the HTML elements to the bare minimum!

The actual necessary script is only 5 lines long, but this all that is needed. What is being done is just removing 5 HTML elements by specifying IDs.

Incidentally, if you wondering how to find out about the IDs of HTML elements, you could simply check the HTML source code, or you easily check them out by using Web Inspector.

 

If you switch the rendering engine in Sleipnir 3 for Windows to Gecko, you can use Firebug 1.7.3. Just right click the element you want to check about, and then select [Check element].

Installation

Let’s put the extension in a place that can be accessed by Sleipnir Mobile for Android. An easy method is to use Dropbox.

You can perform the installation by transferring the extension to Sleipnir Mobile for Android from the Android Dropbox extension by intent.

You could send a mail with the file attached , but there are occasions when you can not open certain attached files with the Gmail app so I recommend accessing mail.google.com/ from Sleipnir Mobile for Android.

Testing

Once you have installed it, let’s try loading http://m.sleipnirstart.com/. Once the page has been loaded, the following changes should occur.

Simply just the search box, but nevertheless a splendid version of Sleipnir Start has been created. Easy, right?

Please join us on Facebook for Sleipnir for Windows!


Please follow us on Twitter!

Facebook Comments