mozdev.org

Dynamic Links    

resources:

FREQUENTLY ASKED QUESTIONS

Features

Usage

When installed, Dynamic Links is switched on by default. Press the Ctrl key to activate it - links are created/changed by moving mouse pointer over words.

If any text selection exists, it is used instead of the word under the mouse pointer. Multiple words for lookups are currently used only for Google (for which all spaces between the words are replaced with '+'). If the first word of a multiple-word selection starts with a http or ftp scheme, spaces between the words are removed to get one URL (e.g. Slashdot uses such splitted URLs).

Update: "splitted" URLs are now automatically recognized if the URL is splitted by the following elements:

Note: There is an issue with Mozilla source viewer.

The source viewer (menu View -> Page Source or Ctrl-U) is used to view HTML page source or the contents of XML files (at least in Mozilla version 1.0 - version 1.2 should show XML natively in a user-friendly way). However, the viewer implementation uses a separate window different from common Mozilla windows (and skips toolbar, urlbar...).

Current Dynamic Links implementation doesn't get initialized with the separate source viewer window but I can suggest you even better workaround how to use the source viewer. The viewer window shows the source by prepending special scheme string 'view-source:' to the URL. An attempt to call 'view-source:'+URL from the urlbar ends up with new separate source viewer window. However, there is an option to use a bookmarklet to open source viewer window in the curent window AND THEN use Dynamic Links - which will automatically strip the 'view-source:' substring away and will use correct absolute URL paths even for relative paths! (Pretty useful for opening different .js or .css files.)

The bookmarklet is a modified Jesse Ruderman's bookmarklet and is to be added to the bookmarks file to the 'Personal Toolbar Folder'. Choose suitable Name (something like 'src') and give it this 'Location':

javascript: location.href="view-source:"+location.href;

How Does It Work?

Dynamics Links extension uses W3C's DOM (Document Object Model) and Netscape's JavaScript.

First, here's how I create a temporary dynamic link from a single word:

I use DOM mousemove events to find and separate the word right under the mouse pointer. At the beginning I get the event target's nodeValue which can be a very long string. I try to find the last space in the first half of the string and the first space in the second half of the string. If there are none, I am done - I have the word the user wants. If there are any spaces there, I use their position and split the DOM #text node with DOM splitText() function. Next mousemove event returns only one of the newly created #text nodes - the one under the mouse pointer - and its nodeValue is a string smaller than half of the original string. I keep catching mousemove events and splitting the #text nodes until I find the #text node corresponding to the desired word. Then I create a link by replacing the found #text node with my artificial link (using DOM replaceChild). In fact, I do a little bit more (cleaning, meaning guessing etc.) but the whole operation is typically pretty fast for short #text nodes (although it is close to inapplicable for very long #text nodes). The advantage of this approach is you can create links without the need to click - just move your mouse and click only if you find the right link you want to use.

Second, alternative links:

Dynamic Links extension uses two types of alternative links: the URLs created by going up a directory (in case of existing links) or predefined web sites for lookups (typically Google). Alternative links are created as a set of numbered attributes assigned to the link under the mouse pointer. I use mousemove event to cycle through them - a user just moves the mouse pointer horizontally over the link, the number of mousemoves is detected and after reaching certain limit (empirical value, default is 12, can be changed in Preferences) the link gets replaced with the next one in the queue.

Third, I also wanted to have an opportunity to create dynamic links from multiple words or parts of words:

Mousemove event itself isn't sufficient here. The beginning and the end of the desired text string has to be selected with the mouse pointer. I detect the existing selection with window.getSelection(), save it and find the word under the mouse pointer like before. When the link is to be created I use saved selection string and create the link from it. It may look strange but the link for the selected text can be created for any word in the text, even outside of the selection. I not only don't see a problem here - only the link itself is important and will disappear immediately after its use - but splitting the #text node inside the selection typically means parts of the selection are removed in the most unpredictable way (which we can prevent by creating link for any other suitable word - typically some long word for easy manipulation).

Limitations

There are some limitations I know about:

Is There Any Prior Art?

You may remember ill-accepted Microsoft's Smart Tags project (Walter S. Mossberg: New Windows XP Feature Can Re-Edit Others' Sites, June 7, 2001; Cydney Gillis: Soft Talk: Microsoft drops the ball on 'smart tags', June 26, 2001; Chris Kaminski: Much Ado About Smart Tags, June 22, 2001). Microsoft's implementation (and I hadn't the opportunity to test it) probably pre-processed an HTML page during the loading phase and marked certain words with those 'smart tags' according to a vocabulary. I understand the 'smart' word as an option to choose from multiple related (maybe even context-based?) links: a user would be able to invoke an icon, click on it, invoke a small window and select a link from those predefined ones for the particular word. That project stirred huge opposition (The Smart Tags Weblog) due to its potential to steer traffic to Microsoft-related web sites or even due to anticipated rewrites of already existing links.

Adam Lock's Diggler is a very nice piece of code. It reads URLs from Mozilla's urlbar and through its own intuitive menu it offers a list of derived links (screen). I already had that idea implemented (in my case it was Perl web page pre-processor used with my local web server) but Adam's implementation works directly in Mozilla.

Have I forgotten anything? Let me know.

About the Author

My name is Jiri Boucek and this is my first open source contribution. Probably not the last one because I believe browsers should do much more for us.

Professionally I am a senior IT consultant (network and systems management, systems administration, software development, security auditing etc. etc.). I am interested in novel ways of data processing and information visualization. And off course, I am constantly looking for interesting IT projects. :-)

And by the way, why Mozilla?

I simply need one mature browser - for both MS Windows and UNIX environments - that I can extend.

 

The dynamiclinks project can be contacted through the mailing list or the member list.
Copyright © 2000-2017. All rights reserved. Terms of Use & Privacy Policy.