favicon service in firefox

That's the places thing everybody talked so much about when announcing firefox 3. What we actually see in bookmarks or history is just a top of the iceberg. Had I read the places documentation before I started working on seoprofesional toolbar, I would probably just use the places tagging system or something to select the sites to remember...

Anyway, at the first attempt I just used favicon service as follows:

The trouble was, the icon was really the favicon from the site. The original size (whatever it was) and possibly animated. That I didn't like. So the second attempt looked like this:

The resulting icon is 16x16 and not animated. Only remember to put try...catch in the right places because you must close the container at the end (result.root.containerOpen = false)

(The last example was updated on the 7th of Feb 2010 to incorporate changes in FF3.6)

flot and flotr

I promised a few words about flot. I thought a lot about it and instead of writing how good and easy to use it is, I will just point you to it. I must also mention flotr, which is a similar library, but uses prototype instead of jquery. Now the links:

• flot
• flotr

2 small notes: I like flotr better. It's output seems to me to be a bit more polished. But I picked flot for seoprofesional toolbar, because flotr didn't like interrupted series (a line from 1 to 3, then nothing from 3 to 4, and then a line from 4 to 5 again). On the other hand, flotr does support value labels, for which I had to write my own plugin.

ff3sudoku now for google chrome

I have just finished and released ff3sudoku for google chrome. It should be roughly the same as the good old ff3sudoku for firefox but thanks to the firefox system of approval of add-ons by editors you have to wait for the firefox version even though I released it about a week ago, while you can have it instantly for chrome. Good work google!

Now, if there is anybody actually reading this who has installed the extension, please give me your feedback. The extension has it's rough edges and I need to know whether I should be polishing them or not...

firefox personas disappointment

I finally got down to getting personas installed on my machine. Honestly, I do not understand what the hype was about. It's nice, alright, but is that all? Just an image to display on top of the window and another one to display on the bottom? I sort of expected something like skins we all know from X-Window System widget sets, where at least all window backgrounds are changed.

Yet, skinning the red panda opens one interesting possibility, that as far as I know hasn't been researched much yet. How about making your web-page follow the mood of your browser? Or the other way round, your browser, following the mood of your webpage? As far as I can say, none of these are implemented in personas. I expect the second one might be considered a security threat, because if I understand correctly the header and the footer image can actually be html with some javascript in it. Or am I wrong?

Anyway, I can see personas firing a DOM event to a freshly loaded web-page, telling the page what the currently selected persona is, allowing the page to react. The only problem is that there are too many personas for a web-page to implement. Perhaps there might be a way how to allow a web-page use a local resource - a persona-related background image. Web-page will thus indirectly access the viewer's hard-drive. Here we are back to security threats.

(...might be continued...)

ff3sudoku 1.2.0

I have just released a new version of the sudoku firefox add-on. It finally let's you remove the tooltips some find so annoying. This version hasn't been approved by editors yet, so it is still marked experimental. You must go directly here: https://addons.mozilla.org/en-US/firefox/addons/versions/8036#version-1.2.0 to install it.

I have got some ideas what to do next, but to be honest, I would like to see some interest. I mean, if everybody is pretty much satisfied with the status of sudoku, there is probably no need for me to waste time on it.

Meanwhile, I will look a bit more into turning the bloody thing into a Google Chrome extension.

extending pageinfo

In our SEOProfesional Toolbar firefox extension I considered, how I should present some web-page related information to the user. Of course the easiest but quite stupid way to do it would be to make my own information box with the requested information. But in principle, the info we wanted to show was something about the page, therefore logically belonging to the Page Info dialog. I did not find much information on developer.mozilla.org, so I dived into the source code. Let's start with chrome.manifest of our testbed add-on: which simply says that the browser's pageInfo.xul should be overlayed with our pageInfoOverlay.xul. The overlay should look like this: The important parts are:

• The radiogroup overlay with an item with id somethingTab and the oncommand="showTab('something');"
• The deck overlay with a vbox called again somethingPanel

Now you should see your page in the pageinfo. The real fun hasn't started yet. We need to add some functionality. You have probably noticed the link to pageinfo.js in our xul. Until now we expected it was empty. Let's start filling it with stuff. If you look into chrome://browser/content/pageinfo/pageInfo.js you will see that Firefox developers have helped us with building a framework for extending page info. There is a bunch of callbacks to help us set the contents of our page. Following are javascript arrays of functions to be called for certain events.

• onLoadRegistry
• onResetRegistry
• onProcessFrame
• onProcessElement
• onFinished
• onUnloadRegistry

We will just look at onLoadRegistry and onProcessFrame here as they are the only 2 I have used. onLoadRegistry functions will be called whenever page info is displayed. That's the good place to decide whether we want to display our page or not. The code of our pageinfo.js could look like this: That will hide our page for pages retrieved through https. The second one, onProcessFrame, gets all the frames the page consists of. If we want to enumerate them, we can do something like this: 2 last pieces of the puzzle are missing. The first one: how to assign a headline image for our page. Easy! Through css. You have noticed link to chrome://testbed/skin/overlay.css in our xul. Those 2 images should be 32x32px. And the last thing: what if we also want to invoke the page info dialog from our UI and switch directly to our page? Again, that's something Firefox developers thought about. Very basic: Not ideal though. There is a possibility, that the page info for this page has already been opened. Therefore it is better to look and in such case, focus the existing window: The best news at the end: I have created a test-bed for my experiments. You can install this add-on and see pretty much everything I have been writing about today...

seoprofesional toolbar

Seo-Profesional's and my joint project is nearing to release. It is a Firefox extension called SEO Profesional Toolbar, which is in a way similar to other seo firefox extension, yet, it is superior. Similarly to its competitors it displays page rank and s-rank (for Czech search engine Seznam), but unlike them, it remembers history and displays it in nice colorful charts. After all, everybody likes colors. Go and see YouTube SEOProfesional's Channel to learn more. I am not a SEO person. I am a programmer. I wrote, or I should rather say put together the code and I can say, there are a few nice ideas. In next few posts you will learn how to do a few things in javascript/firefox.

• How to extend PageInfo
• How to high-light words or other stuff in the html page
• How to make charts with flot
• How to access fav-icons
• Bits about a xul tree
• You might have already read about word count (II)

You English speakers will probably need this link to install it...

word count II

In the course of time I found out that the approach I described in here is not ideal. Namely, getting the words from scripts didn't work when there were more scripts in the page. It looks like returns the string value of the first script only. So what we have to do is to take each script one by one and process them separately:

Originally at wordpress, 2009-11-08.

word count

How do you count words in a html document? In javascript? When you have got the HTML's DOM, javascript and whole Firefox at your disposal? Of course, there is a bruteforce method of going through all DOM nodes, but that's rather silly. I found this: (source)
Nice, but it has got 2 problems. It doesn't split words well, e.g. if you have something like word1,word2,word3, it is considered to be a single word. So let us not split by spaces but by something more complex: Unfortunately this is still not enough for it will include words from between the script tags. What now? Let's simply substract the scripts and we are done. Now, the trouble is, this lot can also contain spaces now. But it does not bother me much as I need to go through all words one by one and I can remove unsuitables then.

Originally at wordpress, 2009-10-06.

ff3sudoku plans

I always wanted to keep the ff3sudoku firefox add-on as simple as possible. Now, that's quite a difficult thing, if you want to make everyone happy. So options are comming up! The first thing I'll to is I'll make it possible to turn off the tooltips. Any more ideas? Share them in the comments please... Lately I have been busy with another project which I am not at liberty to disclose yet, and which probably won't be of any interest of you, sudoku gamers. That's just to explain, why the updates are not rolling in as often as they used to. Anyway, when my schedule allows for it, I want to make a complete write of the underlying algorithms to allow players invoke various types of hints, like: find all naked pairs, ... Also the generator deserves some care. I should at least be able to differentiate between easy and medium puzzles.

Originally published at wordpress, 2009-10-5.

Testing the syntax highlighting

So it looks like I am ditching wordpress and coming back to Google for one simple reason: I cannot make wordpress decently display source code. This post is just to test that it can be done: What about some python? Now I would like to give credit to Alex Gorbatchev for his Syntax Highlighter and Carter Cole for his explanation how to use it in blogger.