Something that I don't think many web developers and extension developers seem to be picking up on, but yet some are, is what I'm calling webxtending, which is providing APIs that allow their users to extend their website/webapp or extension with a browser extension. To illustrate this idea take the Gmail-Greasemonkey API, this is a front-end JS API that a user script can easily access to be notified of Gmail's custom events, change state variables, and perform actions with the Gmail interface (afaik the api used to work, and some parts do not work at the moment). This was a wonderful idea because it allowed user script authors to save a lot of development time, also maintenance time, and write more cpu efficient scripts. Furthermore I imagine such a API would be extremely useful to internal development, it would at least reduce the chance of sloppiness.

Webxtending doesn't always mean providing a Javascript API though, it often simply means writing semantic code by using microformats, and structuring the markup in a logical manner, taking into account how others may want to change the UI, and making those changes as easy for them to make as possible. This means using the id attribute even when you don't need it, because others may, but it also means thinking carefully about every facet of the structure. XUL overlays used in Firefox extension development are a good example of this structural extendibility idea.

Webxtend is a gold standard quality requirement, if your website or browser extension is not webxtendable then it's not gold standard quality. =p

After a blog post I wrote last month, "The Context Menu Module & Microformats", Michael Kaply wrote a comment reminding me that there is an API for Microformats built in to Firefox.

So I spent a little time getting familiar with with the API and wrote a Jetpack module for it, which you can find here. This module just a wrapper to export the Microformats API, which can be seen in this file (only viewable from Firefox).

It might be the smallest module that I ever write =]

Get the Microformats Jetpack Module here.

Originally posted on Mozilla's Jetpack Blog

The Jetpack team recently released a context menu module in version 0.3 of the Jetpack SDK. This post will discuss the context menu module’s features and how it can be used to create an extension that allows users to interact with microformatted data on the web.

Microformats

If you are familiar with microformats, you can skip this section. In case you are not familiar with microformats, they are simply specifications on how to pattern commonly published data (contacts, events, reviews, etc.) in HTML so it can be easily consumed.

hCard, geo, & adr

Take the hCard microformat specification for example, an hCard represents a person, organization, or place and includes information such as a name, contact info, address info, and perhaps their geo coordinates all in HTML. Here is an example of a microformat that contains this information:

<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="geo">Geo Coords:
<span class="latitude">37.386013</span>
<span class="longitude">-122.082932</span>
</div>
</div>

The Context Menu Module

You can find documentation and further details on the context menu module here. The primary feature of the context menu module is the ability to create items in the context menu that are shown when right clicking on various content within the browser or a web page. CSS is used to specify in which contexts your new context menu items will appear. If you create a new context menu item whose context is set to “a” then the menu item will appear in all menus shown when the user right-clicks a link.

Bring The Two Together

The combination of microformats and the context menu module makes many practical Jetpack ideas possible. When websites microformat data on their site, and users have extensions installed in their browser which allow for consumption of microformatted data, users productivity can be greatly enhanced.

Even when a website does not microformat data on its pages, a user script or a Jetpack Page Mod can be written to enhance the data on those pages with microformatting.

An Example

In order to show you how useful and extension that combines microformats and Jetpack’s context menu module is, I have created a jetpack-based extension which adds a ‘Find on Google Maps’ menu item to the context menu when the user right clicks on a geo or adr microformat – geo is used for geo coordinates, and adr for addresses. When the user clicks the extension’s context menu item, the targeted geo coordinate or address is displayed on Google Maps in a new tab. You can find this extension here on AMO, as well as the source code here. The bulk of the source code is < 50 lines.

Summary

If you maintain a website that isn’t properly tagged with microformats I would suggest you consider adding them to your content. If you are a user that notices a site that hasn’t properly tagged their site then you can either request that they do so, or write either a user script or page mod that does so for you. Once you have microformatted data you can then write & use extensions to interact with the data.

This is just a last moment idea inspired by the movie Starship Troopers which flashed in to my mind a couple of days ago as I was thinking about Jetpacks for the Jetpack for Learning Design Challenge. It is primarily a Microformat/Link Type proposal for rel-info with some ideas and prototypes demonstrating how it could be used.

Abstract

When you are reading something on the web there are usually pages which exist elsewhere on the web that would provide background information, and further reading if you desired to dig deeper into the subject(s) you are reading about. Sometimes some of those pages are linked to from the article you are on, but often the link wouldn't make sense in the context of the content, and using a link tag isn't very useful to a user, so the link is not made.

I propose a rel-info link type, even if just as a Microformat, for 'a' and 'link' tags to provide a link to context-sensitive information.

With rel-info a user can read more about the Movie that was discussed at Netflix or IMDB easily for example, because the publisher (or a script the user subscribes to, more on this later) provided a rel-info link which the user can easily find and follow with a Jetpack, Firefox extension, or some other browser extension.

Proposal

When rel-info links are provided on a page browser extensions can easily extract them from the page, which can lead to a large number of use cases, of which I am sure I have only just scratched the surface. There is another side to this coin however which is that there are a large number of ways that rel-info links might be added to a page.

Let's explore the latter case, first the person who published the page could add rel-info links, but then browser extensions could add rel-info links, they could also search for and remove rel-info links. A user could subscribe to a person's or institution's suggestion feed or script which adds and/or removes rel-info links to pages, along with using a AI based browser extensions to add rel-info links.

When the rel-info links are going to be consumed there are some other interesting possibilities, for example a browser extension could filter the links by a HTML 5 'data-topic' attribute by keeping a list of topics that the user dislikes or likes, the domain could also be used for filtering. A browser extension could allow the user to mark pages as read so that they are removed from pages in the future as another example.

Prototypes

To test this link type out with a Jetpack I first had to add it to some pages, so I decided to write a couple of UserScripts to do this demonstrating how they can be dynamically added to pages by anyone even users themselves. The first userscript was to add the rel-info link type to IMDB links, and another to add the rel-info link type to Wikipedia links.

If you install the above UserScripts then you should find rel="info" or rel="... info" on your IMDB and Wikipedia links. Once you have done that you can check out and install the "Would You Like To Know More?" Jetpack. This is a slidebar Jetpack, and when you open this slidebar the focused tab is then scanned for rel-info links, if any are found then they are displayed in a list for you to choose from, if you click one of the provided links a new tab will be opened for the new page.

These UserScripts and the Jetpack take advantage of HTML 5 'data-' attributes, by adding a 'data-source' attribute to the rel-info links added on the userscript side, which the jetpack was written to check for and display if found. This is an example of how HTML 5 'data-' attributes can be used with the rel-info link type which I propose to create more interesting results.

Rev Attribute

The html rev attribute in my opinion is underused and incredibly useful. In short the rev attribute is the reverse of the rel attribute. Here are the HTML 4.01 specification definitions:

• rel: This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.
• rev: This attribute is used to describe a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types.

A few months ago I wrote about the difference between the rev and rel attribute where I give an example which may help, and there is also a good example here.

Link Types

Link types are the values that can be used in the rel and rev attributes. Some link types are old, some are new, some are microformats, others are used by search engine bots. This is the HTML 4.01 list of link types, and this is the HTML 5 draft list of link types.

Some of the link types added to the HTML 5 specification are: archives, author, external, feed, first, and many others. Some of the link types removed are: start, chapter, section, subsection, and a few others.

The external and nofollow link types were also added to the HTML 5 specification which have been widely used for some time now in the rel attribute for SEO purposes. The tag link type was the better defined rel="tag" microformat before it was added to the HTML spec, however I expect and hope the microformat specification will continue. The tag link type was created at Technorati, which they describe here, and this is how it was created.

Vote Links

The Vote Links microformat are rev attribute values that I hope will become a link type in some future HTML specification. These are three values described by the Vote Links microformat, they are:

• vote-for: Represents approval.
• vote-abstain: Represents abstention or indifference.
• vote-against: Represents disapproval.

Currently I always rel="external nofollow" on any link that I will rev="vote-against", and rel="external" any link that I rev="vote-for" atleast once, which covers 75% of my links. But there are other links which I want to be more specific about, and for me that is where the Vote Links microformat comes in handy, because I can vote-for a link that I also nofollow. For example, I usually nofollow my links to Wikipedia (becuase it has so much Page Rank already) and use the vote-for microformat to show my support.

Conclusions

1. The rev attribute has been widely misunderstood and misued, but it is very useful.
2. There is a dramatic difference in the link types defined in the HTML 4 specification and the HTML 5 specification draft, but even some of the depricated link types appear useful to me.
3. The rev attribute is not in the HTML 5 specification draft, which is like removing the yang from a yin-yang, and I have not found a good reason for it, only a few hints which reinforce my belief that it is not good idea.
4. Vote Links rock!
5. Between the HTML specification chaos and Microformats, this is the time where we all get to decide what we want to embrace, and let the HTML specification follow our lead.

I'm still not sure if I'm a fan of all of the microformats that I have come across so far. But I can tell you that I am a huge fan of the VoteLinks microformat, because I think there is a huge need for them in SEO arena.

Currently search engines like Google, Yahoo, and that other search engine (made by the same company that makes that crappy browser) all primary rely on PageRank, which determines the importance of a document by considering the importance of the documents that link to it. In PageRank, every link is valuable, except those links that use the nofollow link type (ie: any link without the nofollow link type is considered an endorsement). PageRank does not consider the possibility that document A might want to have a vote on document B's calculated importance, besides just the option of endorsing document B.

Enter the VoteLinks microformat. With this specification, website masters can now specify links on their web documents as votes for or against other web documents. You can also abstain from voting, ofcourse.

For example, you may have noticed that in my second paragraph I was taking a shots at the Microsoft Corporation (which I love to do) and if you look at the html markup, then you will notice that those links are votes against Live Search and Internet Explorer. So now I'm telling any user agent that visits this document that this document is a vote against those Microsoft products. This document is also a vote for some wikipedia articles, Google, Yahoo, and the VoteLinks microformat. That's a lot of knowledge that spiders can gain because of this markup, hopefully the search engine spiders start considering this microformat as a factor soon..

Anyhow, if you want to start using the VoteLinks microformat now, all you need to do is insert the following values into the rev attribute of your html anchor tags:

• vote-for: This signals that the current document is a vote for the href url of the anchor tag.
• vote-against: This signals that the current document is a vote against the href url of the anchor tag.
• vote-abstain: This signals that the current document is indifferent to the href url of the anchor tag.