Martin Kadlec

Sticky post

Monday, March 22, 2010 2:00:14 PM

- WishList
- My Unite App
- Member of the Week
- Czech Opera Bug Report

Youtube Sortify extension

Thursday, December 13, 2012 12:41:05 PM

So Youtube rolled out new layout again and while doing so they removed the sorting options in filters. I remade an extension for FF so that it would work in Opera.

If you are like me and you sort videos quite often you can download it here:
https://files.myopera.com/BS-Harou/files/YoutubeSortify.oex

or it will be soon in Opera addons catalog as well.

2 comments

Modular injected scripts in extensions

Wednesday, August 8, 2012 6:45:59 PM

script, extensions, extension, javascript ...

Recently in one of my blog posts I mentioned great library Require.JS. It has an API to load JavaScript snippets as modules. It works really great with popup files or with background file in speed dial extension.

Unfortunately, you can't use it in injected scripts for several reasons.

Require.JS loads the snippets with script tags and we don't want to add any script tags to every page when our extensions is running.
Even if it wouldn't be a problem we still can't load scripts from our extension package with script tag.
Script tags also has it's own browser scope without the special Opera Extension APIs.

The conclusion is that Require.JS is useless when it comes to injected scripts. What we can do is to split our script to several injected script files. But such files have to use global scope to communicate and they are executed in alphabetical order.

Luckily, latest snapshot of Opera 12.50 Next has the new Resource Loader API. It is just one function which returns reference to "File" object of any file in our extension oex package.

Opera Extensions API discussion

Thursday, July 26, 2012 10:09:44 PM

extensions, discussion

As I am watching Opera development I have noticed that Opera developers like to focus on something, then for a time work really hard on it and finally slowly leave it with only occasional fixes.

Sometimes I discover or star using a great opera feature and I'm angry I haven't give it more attention when It was being developed because improving the feature now is nearly impossible. You can't persuade (nor intimidate

) any Opera developer to give it more time because they are already working hard on something else and they just can't give it the time.

Now why am I talking about it. Right now Opera is working on extensions and their APIs. There is new API for tabs and windows in Opera 12. There is even more in a recent lab build and there is very likely coming much more cool stuff to Opera in near future.

I'm quite sure Opera already has a road map of what to implement, but even though this is probably the best time to come up with something and talk with Opera developers about the possibility of it being implemented. It might be just small change to some already existing API or some completely new API you would like to see in Opera.

All ideas are welcome and if you add how it should work in JavaScript it would be even better. Please express yourselves in comments and tweet about this post to get as many ideas and opinions as possible!

6 comments

Angry with Opera

Thursday, June 14, 2012 11:10:01 AM

Usually I protect Opera and point to its bright sides when somebody tries to insult my favorite browser, but with release of Opera 12 I can't help it but look at Opera from the other side.

In My Opera profile there is an question "Why did you choose Opera". I chose Opera +-6 years ago and the reasons back then were speed, community, standards support, innovation and customization. The question is, do all these reasons still stand?

Themes for Opera 12

Wednesday, May 2, 2012 12:17:55 AM

themes, vladstudio

Extensions are great thing but sometimes it is necessary to improve design of your browser as well. With Themes in Opera 12 it is very easy so I decided to try it too.

My favorite wallpapers come from guy called Vlad Gerasimov and his site http://vladstudio.com/. I randomly chose 5 wallpapers (1680x1050) and made themes from them. You can try them or make your own. There is a tutorial on dev.opera.com.

Enjoy!

Bluebells

Eagle Ray

Learning to Fly

Lightnings

Whale

4 comments

Building Speed Dial Extension with Require.JS and Mustache

Saturday, April 28, 2012 8:42:44 PM

extensions, mustache, Speeddial, require.js

One of the many problems of web developers is the need to have as little client-server requests as possible. That leads to many server-side frameworks which concatenate all JavaScript files to one, minifie them and cache the result that will be sent to the client.

But today we are developing Opera extension. What does it mean? All JavaScript files are already on clients computer. Loading multiple files can still take little longer than loading one big js file, but the time necessary to establish connection and send the data is no longer a problem. This give us a chance to build our extension more cleverly.

One option is to use a plenty of script elements. Luckily, there is also other faster and more elegant way. It is called Require.JS. It provides API to load other js files as modules, have good grasp of dependencies and it prevents global pollution.

Let's take a glance at the simplest example. Only script tag you must have in index.html looks like this:

<script data-main="scripts/background" src="scripts/require.js"></script>

Where require.js is the file that does all the magic and you can download here: http://requirejs.org/docs/download.html

and scripts/background is background.js file where all your js stuff begins.

There is excellent short tutorial on how to use Require.JS on the official site. I sincerely recommend you to read it through as I am not going to explain much how to use it + I'm going to show you only basic usage. Require.JS can do more.

What we are going to do is a simple RSS Speead Dial extension. You can find the whole source on Github.

I let creating config.xml file on you as there isn't anything new. We have also already described the only important thing in index.html, otherwise it is just simple basic skeleton:

<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>RSS Speed Dial</title>
	<link rel="stylesheet" href="styles/sd.css">
	<script data-main="scripts/background" src="scripts/require.js"></script>
</head>
<body>

</body>
</html>

Require.js and background.js are not the only files we need. Please download following files and put them all in the "scripts" folder.

"Text" plugin for require.js to load Mustache templates
"DomReady" plugin for Require.JS. Because Require.JS loads scripts asynchronously we can't use DOMContentLoaded event. Instead we can use this.
Mustache adapted for Require.JS

Now is our part to program something. We will need to create four files. JS file with some simple AJAX library to load the RSS file. Template file for Mustache that will define the structure of data we are going to display. CSS file to define the looks. And finally the background.js file which will use it all and make it works together.

I'm not going to show you here the ajax and css file because they are not important. If you want to use the same files as I did you can download them on Github.
- CSS
- AJAX library

Template (item.tpl):

{{#items}}
<div class="item" data-url="{{url}}">
	<div class="date">{{date}}</div>
	<div class="title">{{title}}</div>
</div>
{{/items}}

backgrounds.js:

// load all dependencies
require(['ajax.mod', 'mustache', 'text!item.tpl', 'domReady!'], function(AJAX, Mustache, template, d) {

	var
		c  = AJAX.create(),				// use AJAX library to create new connection
		sd = opera.contexts.speeddial,
		b = d.body
	;

	loadRSS();
	setInterval(loadRSS, 15e4);         // load RSS file every 150 seconds
	setInterval(scrollWindow, 1e4);     // load next RSS item every 10 seconds

	function loadRSS() {
		try {
			c.getData('http://feeds.feedburner.com/FavoriteBrowser', handleSuccess, handleError, false);
		} catch(e) {
			console.log('RSS Error: You are probably offline. Retry in 150s.');
		}
	}

	function handleSuccess(e) {

		// Prepare data object for Mustache
		var data = { items: [] };
		[].forEach.call(e.XML.querySelectorAll('item'), function(val, i) {
			data.items[i] = { 
				title: val.querySelector('title').textContent, 
				date: val.querySelector('pubDate').textContent,
				url: val.querySelector('link').textContent
			};
		});

		// set url and title of speed dial item
		sd.url = data.items[0].url;
		sd.title = e.XML.querySelector('channel title').textContent;

		// render Mustache template
		b.innerHTML = Mustache.render(template, data);
	}

	function handleError(e) {
		// File couldn't be loaded
		console.log(e.text);
		b.innerHTML = 'Error: RSS is not loaded';
	}

	function scrollWindow() {
		// Move first element to last position - moves the second one to top
		if (b.firstElementChild) {
			b.appendChild(d.body.firstElementChild);
			sd.url = b.firstElementChild.dataset.url;
		}
	}
});

The real work here is only the 50 lines above and you have working RSS Speed Dial extension for Opera.

Install the extension and the result should look like this:

Yes, we had to download and use quite a lot of files for extension as simple as that. But this is the ground for extensions of any size and complexity. And as will your extension grow you will more and more appreciate the possibility to use multiple files with dependencies.

This tutorial alone probably won't help you much you will need to study the Require.JS API and try to play with it a bit. I believe you will find it very exciting!

4 comments

Tools for developing Opera Extensions on Windows

Thursday, April 26, 2012 2:35:47 PM

extensions, github, git, sublimme text ...

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 2. 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 http://wbond.net/sublime_packages/community 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 ST2 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:

http://gitref.org/basic/#status
http://progit.org/book/
http://book.git-scm.com/
http://net.tutsplus.com/tutorials/other/easy-version-control-with-git/
http://betterexplained.com/articles/aha-moments-when-learning-git/

How to install GIT on Windows and how to use git with Github:
http://help.github.com/win-set-up-git/

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 him 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 be opened. 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:
http://downloads.sourceforge.net/sevenzip/7za920.zip
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.

4 comments

Quest for 1.000.000 Winners - Dinosour

Wednesday, March 28, 2012 6:32:29 PM

dinosaur

I have finally received my price from the 1 million Opera facebook likes quest. When we were informed to send them our address I asked them for a drawing of a dinosaur on my postal package and Opera did not disappointed me

Thank you Opera!

3 comments

"Secret" mail options

Saturday, December 17, 2011 9:43:16 PM

mail, signals, secret

I don't know how many of you are actually using your e-mail on mail.opera.com. Because old GMail UI is ugly and the new UI is really laggy in Opera i decided to leave GMail and start using Opera e-mail instead

There were some things (like filters) I missed in Opera email though. But!, today - thanks to Nimesh - I've finally solved this issue

The thing is that Opera is using big part of fastmail code, even parts that are not official implemented yet. These parts are not accessible from current Opera E-Mail UI, but there is a trick how to access them.

The first step is to log in on mail.opera.com.

Second step is the cool part. Put this URL:
https://mail.opera.com/mail/?MSignal=XX-
to you address bar and change the XX the to one of the following:
AA, BB, BG, BU, CA, CD, CF, CH, DL, DR, EG, FI, FL, FS, GC, LP, MC, MI, MS, NP, PE, PL, PM, PY, QU, RA, RS, SG, SU, TI, TV, UA, VD

Each of these signals show you different secret dialog. Some are more useful than others and some are not useful at all. There is a simple description of each signal:

The interesting (for me):
BU - "Bandwidth usage"
FI - "Define Rules" .. Filters <3
FS - *Files* .. You can upload some files to your account. The quota is 10MB. Uploading files is possible, but some other parts like public site to download them is not working.
NP - *Notes* .. very simple, it would be awesome if it was connected to Opera notes.
QU - "Quota usage"
RS - "Referral Status" .. I'm not sure if this is working, can you please click on this link?: http://www.myopera.com/?STKI=5864829

The rest:
AA - "Add to address book" .. Adds e-mail addresses from sent e-mails to your contacts. Opera E-Mail is doing it automatically so you don't have to care about this one.
BB - "Buy Email/File Storage Bandwidth" ... It is not possible to buy more E-Mail bandwidth .
BG - "Buy Gift Certificate" .. Not useful, you can't buy Gift certificates

You have to find another gift for your parents for Christmas

CA - "Cancel account"
CD - "Custom DNS"
CF - "Edit Custom Fields" .. Something with fields for contacts
CH - "Add Funds" .. Again, it is not possible to use payment actions
DL - "Distribution Lists"
DR - "Domain Registrant Information"
EG - "Edit address groups"
FL - "Folders" .. Use Opera UI for editing folders instead
GC - "Retrieve Gift Certificate"
LP - "Lost Password" .. Haven't tried
MC - Probably the old fastmail send message window.
MI - "Migrate IMAP Mailbox"
MS - "Search Messages" .. Unfortunately, this is not working

It would be very useful
PE - "Personalities" .. Use Opera UI instead
PL - Settings for Personalities .. Use Opera UI instead
PM - "Purge folder" .. You can use this to archive, purge and remove duplicate messages from your mailboxes.
PY - "Add Funds"
RA - "Add Account" .. Use Oper UI instead
SG - *Signtures* .. Use Opera UI instead
SU - "Support Form"
TI - "Create support ticket"
TV - "Ticket details"
UA - "Import/Export contacts" .. Use Opera UI instead
VD - "Virtual Domains" .. Not sure if or how does this work

14 comments

1 2 3 4 5 ... 8 Next »