ecmanaut

For a few days now, I have had the joy of browsing the web with Mark my links, a Greasemonkey user script that supersedes the Find links to you! bookmarklet I made a month ago. (Direct install link, Change Log and userscripts.org entry here.)


Where the bookmarklet would only give you access keys to scroll the page to the first ten links bound for your page or pages, the user script also adds little favicons before the links (for a visual cue of which link was pointing where), and centers the view on them, as you press Alt+1..9 (and Alt+0 for link number ten). Also, you can now tab away to cycle through the rest of your inbound links, skipping past all other links in the page.

It's an experience similar to my first encounter with Greasemonkey, and after that my first encounter with BookBurro for book browsing. All of a sudden, it's my web. If someone links to me on a page I read, I see my icon there, right before the link. And if I browse my back links, reading up on pages linking to me where I know a link to me is present somewhere, homing in on it is but a keypress away. Just like that. It shows up before Google search results, in mail I read at GMail, on my Blogger profile page, at userscripts.org and, well, everywhere.

And most of all, it's really easy to set up and add new sites and link patterns to. A click on this bookmarklet on a site you want to add, and you are transfered to the config page, another click on "add" and a third on "Save changes" and you're done. And if the site did not have a favicon and you want to see a more specific one than my link love heart, click the heart and provide a better 16 by 16 pixel image instead before saving. That's all there is to it.

And should you want to give people reading your blog or web site a quick option to add your site to the system with a specific icon not used as your favicon, for some reason, you can do that too, linking that same configuration page, appending a # character and the URL for your preferred image to the end of the URL.

It doesn't end with sites, though. You can add file format indicators to links to PDF files or Greasemonkey scripts (when the suffix is in plain view in the URL), mail icons to mailto: links, or even mailto links at specific email providers, like this one, using suitable patterns. Pick up on links about you or some interest of yours by way of topic tracking, indicating links with some specific keyword present in the URL. Your imagination is the limit.

Maybe a good next hack might be creating some additional tools for enabling easy sharing of Mark my links setups (or just smaller constellations of matchers, for that matter). I have a few ideas up my sleeve already. And maybe I ought to move out most of the documentation and/or script history from the config page too to pages of their own, while at it; I got a bit carried away wanting to release it quickly.

So dig in. And digg it, perhaps? I did a bit of a site overhaul the other day, moving graphics to a greased weasel of a web server and adding a bit of a comfy bookmarking panel below the post tags. Hopefully things shouldn't load quite as slowly now, except for the main page which still loads Google Maps. Google Maps isn't a greased weasel quite yet.

Latest stable version: 1.10. What is this?

What is this?

This is the joint configuration, updates and past history page of Mark my links, a tool to make the web a bit more friendly and centered on yourself, giving you the option of marking links to sites you care about (yours?) with icons, wherever you roam.

The configuration form above (which does not appear until you have installed Firefox (1.5 or later), Greasemonkey and the user script itself) has a prominent text field looking much like the location field of your browser. This is intentionally so; you can paste URLs into it, and click the tiny "add" icon (c/o the Silk icons set by Mark James) to the right of it to have links to that site show up prefixed with the site favicon during future browsing.

Below this URL field shows a list of all the sites (and other rules) and their icons. Upon just having installed the script, this site and user scripts are the only ones it is aware of; try adding a few sites, if you like. A new line with your domain name, prefixed "Site", and with a greenish border appears at the bottom of the list. What does this mean?

The green border around the input field signals that the URL presently in the (mock) URL field, had it been a link on a web page, would have been marked up with its icon. If you have another 16 by 16 pixels large icon you would want to use instead of that used for the site, or my default pick, if your site had no favicon (a cuteish heart, for link love), you can click the icon to give another URL. If you don't have it on the web, or don't want the script to fetch it from the web, you may instead opt to turn your image file into a data: URI, for instance at the data: URI kitchen.

When you are done setting up sites the way you like, remember to click the Save changes button. Not much will appear to happen, except if you reload the page, your choices will still be there, and if you opted not to click save first, they will have been forgotten.

Go off browsing the web, and see who links to you where. As a nice side feature, the ten first links on any page pointing your way can be zoomed to by pressing Alt+1 to Alt+9 (and Alt+0 for the tenth link). Tab your way forward from there; they are all added in one go, so you should not have to tab through any uninteresting links.

Can I mark links to specific file types too?

Yes, as long as they are given away by the URL. Time for the next feature insight: if you click the "Site" column, it will toggle to read "URL". Which means that for this row, the matcher regexp will be applied not only on the host name, but on the entire URL. The Greasemonkey icon is an example of that. Here, the regexp will be applied to the entire URL (minus the fragment, that last bit starting from # onwards). The scary-looking example will match a .user.js extension (URL query present or not).

Advanced options

Okay, that was nifty. That regexp bit had a nice ring to it; fill me in.

The basic mode of operation described above will match the host name of links to the text in the input field. So while I could have one line for ecmanaut and another for my idea blog (now actually a joint project with others who occasionally get ideas they don't have the time to address right away but want to blog about before they forget about it), I might make that line read (ecmanaut|some-assembly-required).blogspot.com instead to have my icon applied to links to either blog. If I try pasting some URLs from them in the URL field, sure enough, that regexp stays green. Nice.

Try out some regexps of your own. You may notice that it turns red once in a while while you are in the middle of something. This means that it's a broken regexp (don't rush me; I'll add the closing brace in a minute; sheesh). That redness just says we won't allow you to save the configuration until you fixed the problem.

Behind the scenes, in Site mode, this regexp is actually anchored to the host part of the link URL (with protocol and host parts lowercased), and it must match the full host; if a :4711 port is there, the link won't be marked with your image. Also, it means that links to www.google.com won't be marked by the regexp google.com; the regexp is anchored on both ends. Add a (www.)? prefix to it, if you like, or perhaps .* while at it. (And of course you may also opt to mark dots as \. rather than the catch-all wildcard; I have opted not to by default as it hurts readability and scares away the less technically minded. Bear with me; I want this to be useful to as many as possible, without enforcing stupid policies like replacing dots with quoted dots behind the scenes. Yes, I knew you would understand.)

In URL mode, your regexp is applied verbatim to all links.

Change Log

Version 1.10, released 2006-05-01

Added a workaround kludge for mozilla bug 340024 to make the configuration page work again in Firefox 1.5.0.3.

Version 1.9, released 2006-03-17

Interface improvement; moved the checkbox next to the icon itself for context relevance and added a helpful clickable column header for some short documentation of the feature.

Version 1.8, released 2006-03-17

Added favicon overriding support. Check the checkbox to have pages matching the rule have your preferred favicon rather than the page default. Very useful for improving tab findability in windows with many tabs where page authors have failed to provide their own (or unique / identifiable) favicons.

Version 1.7, released 2006-03-04

Prior versions injected all icons in one batch, and then left them hanging where they were even as page layout changed around them. This version is experimenting with relayouting as the page changes, assuming page change is initated by mouse clicks. In other news, hidden links (in hidden divs, for instance) previously ended up with an icon at the top of the screen; now they are not shown at all. Moved code around a bit for improved readability.

Version 1.6, released 2006-03-02

Bugfix: removed needless double filtering and case insensitizing. Site matchers using patterns containing \b, \s and similar should work now. Also, the case insensitizing is applied to links prior to testing, rather than the regexps themselves.

Version 1.5, released 2006-03-01

Bugfix: sites lacking favicons were not properly given the default link love icon. Also added a note with the add new site bookmarklet to the user script documentation section.

Version 1.4, released 2006-02-28

Code generalizations for config page live matching. First public release.

Version 1.3, 2006-02-27

Some additional fixes to use the default icon in all cases it should show up, and not waste space needlessly storing it on disk. Added the user script Greasemonkey icon to the default configuration.

Version 1.2, 2006-02-27

Trimmed down my test setup to one default site (which is as easy to get rid of as it is useful visually to initially get acquainted with the config UI), and came up with a catchy name.

Version 1.1, 2006-02-27

There, now you can set favicons to data: URLs again. Dropping debug mode, getting ready for initial publication.

Version 1.0, 2006-02-26

Mostly cleanups and removing debug. Some fixes to the favicons UI.

Version 0.9, 2006-02-25

Abandoned core/UI feature split, moving the lot to the user script. I'll still be able to add some afterhthoughts on the config page, though; no sweat. Added some code to mark newer versions released here, so the script will alert the user of an available upgrade path when stopping by to reconfigure. Fixed a presumed event handler leak. Added save functionality and somewhat buggy favicon fetching.

Version 0.8, released 2006-02-25

Base sketches on a config UI; still read only, but now read and play, experimenting with core functionality in the user script and some on the page itself. An embedded heart shaped fallback favicon for sites for all of you poor souls who do not have a favicon of your own. This baby lets you see the link love flow to you too.

Version 0.7, 2006-02-24

Initial version. Basic injection and a read-only user interface without any bells or whistles. Thanks to Mor Roses for his take on converting E4X nodes to DOM nodes, making this hack more of a learning experience to play with. E4X is still not very mature working with like this, it seems; lots of time has gone to waste on syntax errors hidden somewhere between where they happened and a mysteriously nonfunctional greasemonkey script.

Userscript draft, published 2006-02-23

Userscript idea. Drafted a sketchy outline of functionality.

Bookmarklet, published 2006-02-01

Original custom bookmarklet generator implementation.

While my link finder bookmarklet is kind of a neat way of looking up where a link back to you is in a page, to see the link context (without the hassle of reading the entire page, and perhaps even hovering every last link when they are not very apparent), it's kind of hasslesome and manual to invoke. Why not have a user script always do the job automatically for you?

On further consideration, I think I'd like to do it like this: set up an URL regexp registry and a matching icon image registry, and scan pages for links to URLs matching anything in the registry, adding the appropriate icon to the link, when found. Unless the present URL also matches either of the regexps, in which case we don't do anything at all. For the first nine or ten outbound matched links found (we probably rarely encounter that many, anyway) also add a numeric accesskey to zoom to each occurrence at the touch of two buttons (or three, depending on your browser).

Configuration: here comes the fun part. Only sissies and those with browsers which still lack provisions for storing user script configuration data (Opera, at present) configure user scripts by editing the raw script content. My preferred way of doing script configuration, for domain inspecific scripts such as this, where there is no previously known DOM (and indeed CSS) layout to hook into to add an UI, is to set up the script with one, somewhere on the web, and have it detect the presence of that page, to inject its UI there in turn. The script quite literally gets a home page, where you can incidentally also write about, link updates to the script and have the script detect and show that it is out of date and could use reinstalling.

GM_registerMenuCommand could of course also be used to create some series of prompt() and confirm() dialogues to do configuration, but that is a cheap man's unwieldy "quick hack" interface, and not very pleasant to use for anything but throw-away prototype/proof-of-concept hacks.

For this particular script, I'm thinking of exposing the lists of regexps and icon URLs, so you can edit them to your heart's content. I'll make a companion bookmarklet to go with it, to invoke on a page you would want to add to the list of sites you would like to track, that heads away to the config page, where a new regexp is suggested to match the referrer page domain, and, if the referring page had a favicon (more correctly: a <link rel="shortcut icon"> directive), that URL selected by default. Add some "delete" action links to taste, and I think we have a fairly complete config setup.

This could turn into a rather useful hack for all of us blog narcissists out there.