Snippets code from my daily experience

September 26, 2010

Firefox 4, packed XPI files and extensions test environments

Filed under: extension,firefox,gecko — dafi @ 8:50 am

My test environment is simple

  1. Create an XPI file with all files unzipped (no jar file inside)
  2. Install the XPI on a separated (and clean) profile, this is applicable to any Gecko application: Firefox, Thunderbird, Komodo, SeaMonkey 2.x
  3. Run unit tests or use the extension
  4. If some test fails I edit code (xul, js, css) directly on installed files
  5. Move edited files on main code build tree
  6. Repeat the process starting from 1.

Any developer uses its own approach, someone prefers to edit the chrome.manifest to point to files on specific directories, someone uses other enterprise-big-team oriented ways.

No matters the approach you use under Gecko 2.0 (ie Firefox 4.0) the XPI file will not unpacked by default, this can complicate your development process but the solution is easy.

em:unpack

Add to your install.rdf the following line and everything comes back (more details here)

<em:unpack>true</em:unpack>

My dev environment has two XPI creation tasks, debug and dist so it’s easy to insert <em:unpack/> only when necessary (debug mode in my case)

RTFM

Please visit often Firefox 4 for developers (better to follow the feed) because FF4 is a little/big awesome revolution and extensions can be affected in many ways.

June 10, 2010

A survey on Safari 5, Chrome and Firefox extensions API

Filed under: chrome,firefox,jetpack,safari — dafi @ 2:28 pm

A couple of hours after Safari 5 publication I’ve received an email asking me to port Table2Clipboard to Safari, after two days I’ve received five emails asking to port on Safari both Table2Clipboard and ViewSourceWith.

The same happens with Google Chrome, people asks to migrate extensions to their new favorites browsers but this is in many cases very difficult or impossible.

Giorgio was very clear on his post “Before you ask… (No NoScript on Safari)” and NoScript is infinitely more important and popular than my bonsai extensions.

Now I want to summarize what it is possible to do on Chrome and Safari and what isn’t possible to do from an extension developer point of view.

Keep in mind that from an extension developer perspective Firefox is a platform, Safari and Chrome are applications with minimal support for pluggable code.

Minimal support doesn’t mean you can’t create great extensions but it means you are very limited in advanced topics like web page listeners, clipboard, file and network system access and many other programming areas.

Jetpack from my point of view is closer to Mozilla Platform than WebKit/Chrome extensions framework so for simplicity when I speak about Firefox I include Jetpack (please apologize me for this simplistic and superficial classification)

Below you find a table with extensions capabilities supported by browsers at time I wrote this post.

It comes from my needs to implements extensions on Chrome and Safari, it is incomplete and anybody is welcomed to help me to complete or correct it.

Content DOM Modification (eg injection) Firefox Yes
Chrome Yes
Safari Yes
Accessing to web pages to modify or simply traverse the DOM is the main browser activity and it is fully accessible from extensions
Chrome and Safari introduce the concept of JS (and CSS) injection to separate access to content DOM from extension DOM, Firefox is like the wild fast west you can do (almost) anything
Tabs and Windows Access Firefox Yes
Chrome Yes
Safari Yes
Enumerating, inserting and closing windows and tabs are common tasks, both Safari 5 and Chrome have very well designed APIs.
Firefox API is too low level (XPCOM from JS) but luckily FUEL simplifies all these operations, Jetpack has a very handy API.
On Safari I was unable to find APIs to listen tabs creation and destruction, Chrome has very well documented APIs to do that.
Tabs Customization Firefox Yes
Chrome No
Safari No
The UI widget tab is available only on Firefox thanks to XUL. If you want to colorize tabs or add operations to context menu you simply can’t on Chrome and Safari, this is by design.
This is a very advanced topic and extensions can live without this feature but new UI ideas must repose in peace for ever.
Browser UI Widgets Customization Firefox Yes
Chrome Partial by design
Safari Partial by design
Firefox has no constraints, Chrome allows to add icons on address bar (page actions), Chrome and Safari allow to add toolbar buttons, Safari allows to add context menu items, too.
At this time the context menu is accessible from APIs in Chrome only from an experimental API
Clipboard Support Firefox Yes
Chrome Partial
Safari No
Is clipboard support an advanced topic? I’m not sure.
Chrome clipboard support is strange, it only allows to copy full tab content and text selection, the text selection can be copied using the trick document.doCommand(‘copy’) so not a real API exists.Developers can’t copy their own strings but only content already present on web pages.

Firefox allows to copy strings from code and the advanced usage permits to choose the flavors, for example plain text and HTML code.

Table2Clipboard is easy to port on other browsers (95% is DOM content code) but how can I copy to clipboard my own generated strings? Sadly I can’t

File System Access Firefox Yes
Chrome No
Safari No
For security reasons Chrome doesn’t allow to open local files (at least from simple APIs), this sounds reasonable but can be very limiting for advanced usage. Chrome (and maybe Safari) can communicate with the file system writing NSAPI Plugins this is more complicated than using a native Javascript API but it sounds consistent with security constraints.

I consider ridiculous that Chrome doesn’t allow to access to file:// pages from extensions

Run OS local applications Firefox Yes
Chrome No
Safari No
Running local applications from extensions follows the same rules of ‘File System Access’ and same solutions (ie NSAPI Plugins)
HTTP low level Access Firefox Yes
Chrome No
Safari No
I think this lack on Chrome/Safari makes almost impossible to implement efficients web pages inspections as done by NoScript
XMLHttpRequest and Cross-domain Firefox Yes
Chrome Yes
Safari Yes
Any modern web application uses XMLHttpRequest but with Cross-domain Restrictions, from extensions all browsers allow to make Cross-domain calls

Safari is less extensible than Chrome

Safari extension API set at this time is very limited also when compared with Chrome, as mentioned above this doesn’t mean all extensions are toys but the user experience can be limited and the developer creativity is seriously damaged.

Treat extensions developers as first class developers

I think extension developers must be able to do same things the application developers can do, obviously security constraints are welcomed but please don’t kill developer freedom in name of an opaque concept of security.

Is the browser less or more secure without AdBlockPlus or NoScript?

January 4, 2010

VisualDiffer 1.2 beta 1

I spent the Christmas holidays working on VisualDiffer, the Komodo visual folders/files comparison extension.

Now I want to migrate VisualDiffer from extension to standalone application using XULRunner because the folders comparison feature is mature and using it from an extension can be a bit complicated.

The migration requires some intermediate steps

  • Remove dependencies from Komodo code (especially the unified diff algorithm)
  • Remove dependencies from unified diff algorithm!!
  • Complete the file comparison feature allowing in-place editing using Bespin.
    Bespin can greatly simplify syntax highlight for different languages, search in file and so on
    Honestly I’m considering also to stay with Scintilla (actually used by Komodo) but I love Bespin
  • Use a cool graphic layout, especially toolbar icons
    I’m not a GIMP guru so if somebody would to help me he/she would be welcomed :)
  • Allow user defined fonts and colors (low priority task)

I hope to release the VisualDiffer V1.2 for Komodo in a couple of weeks but also not Komodo aficionados can take a look to it installing the beta version on Firefox 3.5.x (also 3.6b5) and SeaMonkey 2.x.

Under Firefox and SeaMonkey the “files differ” feature isn’t implemented (Komodo dependencies) but you can test the folders differ feature that is totally based on standard Gecko interfaces, you can find the VisualDiffer item under the Tools menu.

Obviously VisualDiffer on Firefox is a nonsense because it isn’t a browser oriented extension I distribute this version with Firefox support with the hope a larger community can try it and give me feedback before I jump on the XULRunner world.

The V1.2 beta 1 can be downloaded from here.

VisualDiffer is inspired by the fantastic Beyond Compare but this isn’t a mystery ;)

November 8, 2009

Karmic Koala hides Firefox context menuitems icons

Filed under: bugzilla,firefox,karmic koala,ubuntu,viewsourcewith — dafi @ 11:27 am

This week I’ve received four times the same (i.e. duplicated) ViewSourceWith (VSW) bug report that sounds…

“ViewSourceWith stopped to show the icons on context menu, this regression is present on Karmic Koala (Ubuntu 9.10)”

I use Intrepid Ibex (Ubuntu 8.10) and all works fine, so I’ve burned a Karmic Koala ISO and tested it discovering the “regression” exists.

Debug -> Add logs -> Remove logs -> Clean Profile -> DOM Inspect -> MozRepl without find where the problem occurs.

Last resort -> Bugzilla -> Found!!!

The Bug 527253 unveils the mystery!

This isn’t a regression

ViewSourceWith isn’t the guilty, Firefox isn’t the guilty but… Gnome is the guilty :P

Type the command shown below from command line and restart Firefox

gconftool-2 --type bool --set /desktop/gnome/interface/menus_have_icons true

EDIT Or use the UI to obtain same result (thanks to mzz) system -> preferences -> appearance -> interface -> show icons in menus

This worked for me and also for two bug submitters (the other two guys do not replayed to my hint)

So remember Bugzilla is your friend ;)

September 14, 2009

Table2Clipboard 1.0 now preserves styles

Filed under: excel,extension,firefox,openoffice,table2clipboard,xul — dafi @ 6:49 pm

Finally after almost a year I release a new version of Table2Clipboard, one of twelve extensions that won in 2008 the Firefox 2 Contest in the section Runners Up.

What’s new

Until now Table2Clipboard has pasted to clipboard the structure of HTML tables without the styles (colors, borders, fonts) but many users have asked me that the behavior was much more similar to that of Internet Explorer (IE) which indeed maintains many details.

Well, the version 1.0 preserves the styles and in certain cases the result is better than that obtained with IE.

IE inserts also the DOM elements declared “not visible”, for example the table shown in Figure 1  is pasted in Excel as shown in Figure 2.

ie

Figure 1

Table selection on Internet Explorer

excel-from-ie

Figure 2

Copy from Internet Explorer paste to Microsoft Excel

Table2Clipboard discards hidden DOM elements as shown in Figure 3, this makes more sense for me.

Paste from Firefox with Table2Clipboard to Microsoft Excel

Figure 3

Copy from Firefox with Table2Clipboard paste to Microsoft Excel

Other little improvements

Now web links are copied and user can choose to copy images (tag IMG), too.
All defaults settings can be modified from configuration dialog.

The copy of styles on OpenOffice doesn’t work as well as the one on Microsoft products.
The “Paste Special” feature available on OpenOffice doesn’t recognize CSS styles but only deprecated tags like FONT.

I will add support for OpenOffice soon but I prefer the “release early release often” (after a year??? :P) approach so this version has poor styles support on the popular open source office automation suite.

Compatibility issues with Thunderbird 3.x are now fixed.

Table2Clipboard can be installed from AMO or from the project site on dafizilla.

July 18, 2009

Discontinue extensions support for some applications

Filed under: extension,firefox,flock,komodo,kompozer,seamonkey — dafi @ 4:46 pm

Before publish new updates for my extensions I try to test them on every application declared supported on install.rdf, this is a very expensive activity when a specific extension runs on different kind of applications and versions.

I add support for a new application (e.g browser, email client, multimedia applet)

  • when I use the application itself and I need the extension functionality on it
  • when other users ask to me

Now I must decide to drop support for some applications and for specific versions to simplify my release tests cycle.

In some cases it’s easy to decide, for example Firefox 2.x is no longer supported by Mozilla and users continuing to use it are braves or simply fools.

Supporting SeaMonkey 1.x is very hard for me, no special technical problems SM is a very good product but I simply don’t use it.
Instead I’m a satisfied SeaMonkey 2.0 user since alpha1 version.

Supporting Flock, the “social” browser, is easy due to the fact is very compatible with Firefox 3.x but sometimes little differences caused me headaches.
I think to drop support for extensions not Flock centric considering the decision taken from its team last December

Komodo 4.x is no longer upgraded by ActiveState but many people continues to use it, Komodo has a commercial version, KomodoIDE, and not all users purchased the upgrade (me too) so it is very difficult to drop the very old 4.x architecture.

NVU is dead but many users continue to use it also if its sibling/son Kompozer should be strong preferred.

What specifically means “discontinue support”

I would to remove specific tricky code present in extensions to make them cleaner but this can be a bad solution, regressions are always possible so the cure can be worse than the disease…

Removing SeaMonkey 1.x support will make my extension build system cleaner no longer install.js, contents.rdf  and informations present both in install.rdf and chrome.manifest, obviously I don’t discard support only to remove a couple of configuration files but I consider it another complication.

So, “discontinue support” for me means moving attention and energies on applications (and versions) I can test easily, on application I daily use, on applications I receive feedback from other users.

June 5, 2009

gContextMenu’s imageURL property refactored on Firefox 3.5x

Filed under: extension,firefox,xul — dafi @ 5:04 pm
Tags: , , ,

Edited on 9 June 2009 Mozilla guys decided to add a getter for imageURL so no extension will be affected by new property mediaURL replacement, you can read the full story at bug 497098.

Another time Mozilla community demonstrates its strength, why nobody considered the impact before modification is another story ;)

Today a ViewSourceWith user filed a bug about a regression on Firefox 3.5b4, causing VSW to no more open images 8O

After dressing the debug uniform I started to investigate the problem.

I’ve realized the object gContextMenu doesn’t more contain the property imageURL used by VSW and maybe many other extensions.

The imageURL property has been renamed/refactored to mediaURL.

Honestly the new name fits better its new usage and maybe the imageURL property is not intended for usage from extensions.

The poor gContextMenu documentation doesn’t describe imageURL so maybe I abused its usage.

I think gContextMenu need a better documentation because its usage is so sexy inside extensions.

The workaround

A string find/replace inside code fixed the bug, to maintain compatibility with FF 3.0.x I’ve modified the code as shown below

var imageURL = gContextMenu.imageURL || gContextMenu.mediaURL;

February 3, 2009

Firefox spelling checker and multiple dictionaries

Filed under: extension,firefox,spelling — dafi @ 10:00 am

When Firefox integrated the spelling checker I didn’t immediately realized its value, but using it day after day I became “spell” addicted and now I can’t imagine my browser without this feature.

You can install all dictionaries you need, but many people uses only the dictionary for its own language.

Obviously I’m not a normal person so I use three dictionaries; Italian, English and French switching between them when necessary.

Following Murphy laws every time I start to type inside a input box I discover I’m using the wrong language and I must switch it from context menu, a very annoying practice.

Finally I’ve solved this problem writing the extension SpellBySite.

SpellBySite switches automatically to the correct dictionary looking for it on user settings.

For example user can set English dictionary for mail.google.com, Italian for twitter.com and so on.

When input boxes receive focus the dictionary is set and spell checking executed, no more needs to switching from context menu :D

Now my life is a bit easier :P

PS
SpellBySite is waiting on AMO to escape from sandbox ;)

October 27, 2008

Simplify Mozilla profiles usage

Filed under: bash,cygwin,firefox,flock,komodo,mozilla,openkomodo,songbird — dafi @ 3:00 pm

I use many applications written using Mozilla technologies, these applications support the so called profiles allowing users to run multiple instances of same application but using different “configuration” environments.

As developer I use profiles to test extensions without compromise the integrity of my main env.

Running multiple profiles is described in million of places so I don’t annoy you but I describe my own solution based on a bash script that hides details.

Creating bash scripts to run separated application profiles requires only a bit of shell programming experience but it is a repetitive task and can be boring when you need to run different version for example firefox 2 and firefox 3, you manually must write the same script modifing only the application path.

My approach allow to configure applications to run in a single file and then create automatically the necessary scripts.

Suppose you want to run a new songbird profile, using my script you can write:

dave@dafihome:~$ sb

The sb script creates a new separated profile on a configured directory with a default name, but suppose you need a second (third and so on) songbird profile you can pass your preferred name

dave@dafihome:~$ sb testVSW

Now you need to test also Firefox 2.x and Firefox 3.x profiles, simply write

dave@dafihome:~$ ff20 testVSW
dave@dafihome:~$ ff30 testVSW

So you have three separated profiles with same name testVSW, how they don’t clash? The real name created by script uses the application prefix so the directories names are

  • sbtestVSW
  • ff20testVSW
  • ff30testVSW

Do you need Komodo 4.4.x and 5.x profiles? Again

dave@dafihome:~$ ko4
dave@dafihome:~$ ko5 italian-locale

Configuring applications

The names sb, ff20, ff30, ko4 and ko5 are configured in ‘~/.moz_profilerc’

The file format is very similar to fstab and contains three columns describing applications.

The first column contains the type of application.

At this time it can be set to mozapp or komodo, this is necessary because mozilla apps uses MOZ_NO_REMOTE env variable to run separated profiles instead komodo uses KOMODO_USERDATADIR.

The second column is the script name user runs from command line (and is also the prefix added to profile directory names)

The third column contains the application absolute path

Below is shown my configuration

mozapp     ff30          /opt/devel/mozilla/ff30/firefox
mozapp     ff30en        /opt/devel/mozilla/ff30en/firefox
# ff20 refers to installed firefox
mozapp     ff20          /usr/bin/firefox
mozapp     flock         /opt/devel/mozilla/flock/flock

mozapp     komp          /opt/devel/mozilla/kompozer/kompozer
mozapp     sb            /opt/devel/mozilla/Songbird/songbird
mozapp     mccoy         /opt/devel/mozilla/mccoy/mccoy
komodo     ko5           /opt/devel/mozilla/ko5/bin/komodo
komodo     ko4           /opt/devel/mozilla/Komodo-Edit-4/bin/komodo

Profile destination directories

I group profiles by extension, for example inside ViewSourceWith source directory I have a ‘profile’ subdirectory where all profiles are written, this is specified in ‘~/.moz_profilerc’

# Directory where profiles will be created, inside profile present on current directory
profileDir      $PWD/profile

# If true create profileDir silently, otherwise generate error
profileDirCreateSilently    false

It is possible to write all profiles inside a specific directory setting profileDir

profileDir      /devel/mozapp/profiles

Scripts destination directories

The scripts sb, ff20, ff30, ko4, ko5 are symbolic links, they are generally created inside a directory present on $PATH env variable.

I prefer to add them inside /usr/local/bin (this should require to be root)

# Directory where links will be created, generally resides in env PATH
linkDestDir     /usr/local/bin

The script moz_profile.sh

All operations are done using the script moz_profile.sh that allows to edit configuration file and create applications scripts.

Editing configuration (it opens the editor set on $VISUAL or $EDITOR env)

dave@dafihome:~$ moz_profile.sh -e

Creating scripts

dave@dafihome:~$ moz_profile.sh -c

This script greatly simplifies switching from profiles, obviously occupied disk space grows but after a profile is no more needed you can delete it without risks

The script, that works also on Cygwin, is present on SVN repo at moz_profile.sh

August 1, 2008

ViewSourceWith, Thunderbird and mail editing

Filed under: extension,firefox,nsIEditor,viewsourcewith,xul — dafi @ 8:25 am

ViewSourceWith (VSW for friends) is definitively a browser oriented extension, using it with Thunderbird (TB) produces a very different experience.

VSW under TB allows users to view the mail message text (for example to inspect headers) but it doesn’t support any editing feature.

Under Firefox VSW offers textbox form editing (single and multiple lines) and I use daily the feature to edit GMail message content.

Editing rich textbox like GMail is a great feature, you can edit HTML code not only plain text, this is a great step ahead.

A couple of users asked me to add to VSW the ability to edit Thunderbird messages, not the raw view but a real edit feature in mail composition.

Well, now VSW (from version 0.3) can be used to edit Thunderbird messages, both plain text and HTML messages.

Technically speaking adding TB editing was enough easy using the nsIEditor, the same component used under Firefox with GMail.

I hope to post more details about the nsIEditor usage in VSW

Next Page »

The Rubric Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.