Userscripts provide an interesting challenge in extending the functionality of another’s work, without any control on what the starting state will be. Beyond this, I personally make it my goal to have them be self sufficient, without resorting to external libraries or using multiple files.

These scripts can range in complexity but for demonstration purposes I’ve selected the following two:

• Script: “Their Local Time”
• Script: “Minimize Inbox Message List”

Script: “Their Local Time”

Github Source

Basics

I am friends with quite a few people well outside the range of this little island. Our times vary quite a bit but facebook only presents chat message information in my local time. While I am fairly efficient at making mental note of most of these times myself, some do slip through the cracks. Thus, I wrote this script to conveniently display their local time.

Whenever a chat box is added, the basic outline of steps this script takes are:

1. Check to see if a new chat was added
2. Extract the user’s name and profile link and set the mouseover tool-tip to read, “Bob’s time: Loading…”
3. Check to see if there is a local storage record associate with this value and, if so, use it.
4. If not, an XML-http request of their profile is made
5. On success, the “From location” and “Live in location” strings are extracted
6. Using the best location, a second XML-http request is made to google, with the query: “current time in location” and the time extracted.
7. On success, the the time difference in minutes and time-zone are stored in localstore
8. The time difference is then finally used to display the new time

Further Details

As userscripts are found in modern browsers and I was only targeting Firefox’s Greasemonkey, this script makes use of some the more modern features. An example of this is the liberal use of mutator events, as opposed to the classical approach of using an interval to check for chat windows being added. This results in more immediate results. Additionally, the use of recent getElementsByClassName() results in easier, cleaner code.

To display the message, I took advantage of Facebook’s tooltip property and used it in combination with title text to integrate it as seamlessly as possible.

While the script loads the location, the the message will read, “Bob’s time: Loading…”. If a location cannot be found, the message is set to read, “Cannot determine Bob’s time =(”

To keep times relatively fresh in the event of moving/DST while preventing horribly long load times, the time difference (in minutes) and time-zone is kept in local storage for a week.

TODO

It should be noted that, as this script is in infancy, not all issues are known at this time.

• The times are updated only on mouse over, should update continuously.
• If a location on their profile, there is no time displayed. Should provide a means to manually set location.
• Mutation Events are deprecated, need to switch to MutationObserver

Script: “Minimize Inbox Message List”

Github Source


Basics

Back when Facebook underwent one of its UI changes in 2012, the Inbox was made to include a message list side-by-side with the current message. To my dismay, this gave me less room to read and write messages. This prompted me to write a script to minimize this bar when desired.

This is achieved by a small arrow on the left side of the message list to minimize/maximize the contact list. The premise for this script seems simple enough to accomplish. However, I include it here demonstrate the maintenance required for such script in an ever changing DOM (as shown in its change log).

Screenshots