Convert UserJS to Opera extension

Introduction

This is a quick guide for converting UserJS into an extension for Opera. This is a very simple process, but there are a few dirty tricks that we will discuss with you. The article is a practical example of conversion.

Process

First of all, create an empty directory that will act as the root directory of the extension. Create an includes subdirectory in it and place your UserJS in it - the extension will use this script. Create an icon that the extension will use and mark it into a subdirectory (named, for example, icons) in the root directory.
')
Create a config.xml configuration file and place it in the root directory.
Select all the content of the root directory, compress it with zip and change the extension of the archive to .oex.
Now you have an extension that should work correctly, but you still need to test and debug it before uploading to the Opera extensions site.

Cautions

Sometimes UserJS does not work as an extension for various reasons. Most often because any object (for example, location or opera) is used directly. This is easily fixed by accessing these objects through a window object (window.location, window.opera, and so on).

Real example

To show how easy it is to convert UserJS to an extension for Opera, let’s give you an example that will turn you into a developer of extensions in a few minutes. Start the stopwatch!

Step 1: Choose UserJS

For this example, we will use the current HTML5 video UserJS created by former Opera trainee, Martin Rouscher. His script will allow you to view HTML5 video in full screen mode. It goes without saying that you must check the license of any script you intend to use and re-publish. In this case, Martin kindly gave me permission, but you could also use scripts released under any open source license.

Step 2: Create Directories

First of all, we need a home for our expansion, let's call this directory VideoFullscreen. Create a includes subdirectory in it and copy the UserJS file (VideoFullscreen.js) into it.

Step 3: Create an Icon

Of course, you can lovingly create your own icon, but in this example we will be lazy and go to the Open Icon Library . Hundreds of icons are available there, but always check your license beforehand, some of them require a reward. Of course, it is always advisable to indicate the source, and in this case, thanks go to the Tango project for their icon representing the full-screen action . Let's use the 64x64 pixel version as the maximum for the Opera extension manager.

Step 4: Create a configuration file

And again, being lazy, we can safely copy the code specified below into the config.xml file and save it to the root directory of the extension:

<?xml version="1.0" encoding="utf-8"?> <widget xmlns="http://www.w3.org/ns/widgets"> <name>VideoFullscreen</name> <description>Adds fullscreen capability to every HTML5 video element. Just play the video and then hit SHIFT-ENTER or F11.</description> <author href="http://rauscheronline.de/">Martin Rauscher (ported by Daniel Davis)</author> <icon src="VideoFullscreen.png"/> </widget> 

Do not forget to change all the data, mentioning both yourself and the author of the original UserJS.

Step 5: Build the extension

The final step to build is to select the icons and includes directories, the config.xml file and package them into a zip archive. After that, we will change the extension to .oex (VideoFullscreen.zip will become VideoFullscreen.oex) and that's it. The extension is ready to be installed by dragging it to the window in Opera.

Step 6: Configure and Edit Bugs

Although the original UserJS works well, your extension may not follow suit. A good idea would be, first of all, to check the error console, but in most cases the problem lies in the structure of the environment of extensions for Opera, in particular in some of the objects used. When
VideoFullscreen.js addEventListener () method is used several times, but do not specify the object to which we attach events. The UserJS environment assumes that events are bound to the window object, which is true, but the Opera extensions environment is somewhat more complicated, so we need to explicitly specify the windows object, as shown below:

 window.addEventListener('DOMContentLoaded',init,false); window.addEventListener('DOMContentLoaded',function(){ document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false); },false); window.addEventListener('DOMNodeInserted',init,false); 

Gradually delving into the code, you can find several places to improve. In the case of this script, we can make the following changes to improve efficiency:

 //  : document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false); 

 //  : document.body.addEventListener('keydown',keyDownHandler,false); 

We have a detailed article about writing effective JavaScript , which is recommended for reading to improve the performance of not only your extensions, but also web pages and web applications.

Step 7: Release Free

So we converted, tested and improved the expansion. Now we are ready to show it. You can do this by uploading it to addons.labs.opera.com . The extension described in this example can already be found there, however you can download it via this link - VideoFullscreen Opera extension . After installing it, you can try it by finding a page with an HTML5 video, for example, with this educational Bruce Lawson video . Start playback and press F11. In the next article, we will deal with injury from viewing Bruce Lawson in full screen mode, but for now we are waiting for your extensions from you, both converted and written from scratch.