Martin Kadlec blogging

Tools for developing Opera Extensions on Windows

Developing extension is a complex process and there are several things you need to do. I've decided to create short tutorial on "How I am developing Opera extension".

Selecting editor
First of all you have to select your programming editor. My favorite is called Sublime Text. This editor has several cool features and supports many languages, but it is mostly used by JavaScript developers. The great thing about this editor is that you can extend it with many packages.

To make the installation of packages easier you should install something called Package control.

Once it is installed you can easily install other packages. Press CTRL+SHIFT+P to get list of all ST2 commands and write "Install package". The list should reduce to only one command. Press ENTER to select it and after a second or two there should be list of all packages available. You can also visit to see all packages with description.

I personally like these packages:

  • Alignment - Align selected lines according to "=" character with "CTRL+ALT+A" shortcut.

  • ZenCoding - Makes writing HTML easier.

  • SFTP - Sometimes you might have to access your server with FTP protocol. This is how you can do it in Sublime Text.

  • JSLint - Check your JavaScript files for errors. You can edit its behavior (after installation) in "Preferences">"Package Settings">"JSLint">"Settings-default"-->"jslint_options". I use following: "--bitwise --browser --continue --debug --devel --es5 --plusplus --regexp --sloppy --white --nomen"

Creating project
Now we have nice and tuned editor. Next thing is to create a project for easy file manipulation. Let's create our config.xml file and save it to newly created folder that will be root of our project. Then go to the menu bar in Sublime Text and select "Project">"Save project as" and save the project to the root directory. After that, you can use "CTRL+P" to quickly open any file in your project - very comfortable.

When you close your project ("Project">"Close project"), work on something else and then you want to work on your project again you can use "Project">"Recent projects" to reopen the project again together with all files you had opened last time.

Let others help you
You can't completely hide your JavaScript source so there is no point in trying to do so. Instead, you can make it easily available to everyone so they can participate or help you with fixing some bugs. The best thing you can do is to use git together with Github. If you have never worked with git before, don't be scared - it is actually not that hard to learn the basics. There are some sites that might help you learn it:

How to install GIT on Windows and how to use git with Github:

Follow the Github tutorial and create a repo on github and also in our project folder and create the "remote" there, so you can upload your updates. Also use the .gitignore on *.sublime-project and *.sublime-workspace files.

Building OEX files
Even though you can use the config.xml to test the extension you still need to create the oex file time to time. Sublime Text can help you to do this extremely easier. What we need it to do is.

A) Delete old OEX file
B) Create new OEX file which doesn't contain following files:
- all git files
- *.sublime-project & *.sublime-workspace files
- some other folders with "not for extension package" data

You can create "build" files in Sublime Text. Go to "Tools">"Build system">"New build system". New JSON file should open. Replace all with following code:
"cmd": ["del", "$project_base_name.oex", "2>NUL", "&;", "7za", "a", "-tzip", "-xr!*.sublime-*", "-xr!.*", "$project_base_name.oex", "$project_path/*"],
"working_dir": "$project_path",
"shell": "true",
"encoding": "cp852"

and save it as "Opera Extension.sublime-build".

The code above uses 7zip command line interface to create our OEX file, but because you probably don't have 7zip in your command line you have to get it there first.

Open this archive:
and move the "7za.exe" file to C:/Windows/system32.

Everything should be ready now. Go to any file of you project in Sublime Text, select "Opera Extension" builder in "Tools">"Build system" and press CTRL+B to build the project and create the oex file in your root folder.

Start the name of file or folder with "." to prevent it from being in the OEX file.

And that's all. I hope I helped at least someone. :)

Please login to post comments.
26.04.2012 22:04

Originally posted by Frenzie:

Wouldn't it make more sense to add your 7-Zip folder to your PATH than to toss the file in system32?

From some reason, I don't like to extend the PATH variable too much. But it would of course work as well :)
26.04.2012 21:04
Wouldn't it make more sense to add your 7-Zip folder to your PATH than to toss the file in system32?

(of course I'm assuming the GUI and shell integration are also good to have)
26.04.2012 17:04
that is very helpfull.thanks.
26.04.2012 17:04
Good. I'm opened for more tips from others as well :)