Auto-Highlight New Items With The Newslight UserScript

Newslight is a Greasemonkey script that you can use to automatically highlight new posts, new blog comments, recent product listings or any other kind of new content that has been added to your favourite website(s) since you last visited.

The way it works is simple : when you see a web page you’d like to keep track of (e.g. an interesting forum discussion), click a button to save the current version of that page. Then, when you revisit that page at a later time, simply click another button to instantly highlight all the new text and images that have been added since your previous visit. You can also configure the script to do one or both of those steps automatically for all pages of a specific site.

Screenshots

Automatically highlighting a new comment

Highlighting a new comment

Highlighting new images

Highlighting new images

The script doesn't work so great on complex, frequently updated sites. Yet.

The highlighting algorithm doesn't work that great on complex or frequently updated sites, yet.

Newslight's Greasemonkey menu

Newslight's Greasemonkey menu

Download

Install Newslight.user.js (15 KB, requires FF 3.5+)

Once installed, you can access the script’ s features by right-clicking the Greasemonkey icon on your status bar and selecting “User Script Commands…” from the pop-up menu :

  • Remember this version of the page – stores the current version of the page for later reference.
  • Highlight changes – compares the contents of the current page to the latest saved version and highlights any new text/images. Clicking this again will toggle the highlighting on/off.
  • Automatically remember pages on example.com (on/off) – automatically remember the contents of every page that you visit on this site.
  • Automatically highlight changes on example.com (on/off) – automatically highlight new items on all pages of this site.

You can also use these two bookmarklets to quickly access the script’s main functions without going through the Greasemonkey menu. Just drag them to your bookmark bar :

How It Works

I’ll be the first to admit that the highlighting algorithm is very primitive. For example, changing a single word in a paragraph will make the script highlight the entire paragraph, whereas swapping two paragraphs of an article will go completely undetected and un-highlighted. The reason it happens is the way the userscript works : instead of using complex tree manipulation or advanced stuff like revision tracking, it grabs all the text and image nodes from the web page and dumps them into a big lookup table (removing duplicates in the process). Then, when you ask it to highlight changes, it just loads up the aforementioned table and checks the current version of the page against it. Anything that’s not in the table gets highlighted. The actual algorithm for finding new items takes only a couple dozen lines.

For those interested in the technical details, here’s a quick run-down :

  • The lookup table is just a simple wrapper around a plain JS object being used as an associative array.
  • The table is encoded in JSON and stored in a localStorage database (available in FF 3.5 and up). I’m using the PersistJS library to handle the particulars, which should make it easier to port the userscript to other browsers eventually.
  • I tried various ways of fetching all text nodes from a DOM tree, but using the “//text()” XPath expression turned out to be the fastest and most straightforward approach, at least in this case.
  • Miscellaneous stuff, like adding/removing the CSS classes and showing pop-up notifications, is done either via direct DOM manipulation or jQuery.

There’s certainly a lot of room for improvement – e.g. configurable highlight colours, converting the script to a proper FF addon,  better UI etc. – but the inherent simplicity of the algorithm is quite intentional. It’s not meant to precisely pinpoint new items on a site, but rather to serve as a useful hint as to where you might find them; an imperfect but handy filter.

Why do it this way? Because determining what counts as new is ultimately an AI-hard problem – you’d need software with near-human intelligence to solve it. Sure, you could probably get a decent approximation by devoting a few weeks to research, but I’d rather have something up and running now, so I can collect some feedback and see if it’s worth doing that research 🙂

Related posts :

11 Responses to “Auto-Highlight New Items With The Newslight UserScript”

  1. Yelena Goolesby says:

    Keep up the awesome work.

  2. Maree says:

    I will be trying this one out! Thanks for the post!

  3. Carissa says:

    I like this script. I have been using this for the past month and it’s good. It makes browsing a lot faster coz you can focus on the changes of the site when you last visited it.

  4. Jorge S. says:

    Talking about being very primitive, I don’t really care about it. As long as it’s working, it’s fine with me. There’s always room for improvement though. Good work.

  5. Yesterday, I updated my Firefox browser. One of the updates is about a browser highlighter. Is this similar to Newslight?

  6. White Shadow says:

    I haven’t heard of a “browser highlighter”, but it’s likely unrelated.

  7. Korby Lee says:

    That’s what I like about FF, because you can create an add-on for the browser.

  8. seslichatevi says:

    Very nice sharing thanks/20.02.2011 21:05:03

  9. drhouse says:

    There’s a great firefox addon called Check4Change that highlights changes for those interested in this kind of thing.

  10. Tongkat says:

    FF has really some great add-ons. Browser number one to me.

  11. Tongkat Ali says:

    HI, thanks, thats a very useful feature! Good to know.

Leave a Reply