Hacker News Bookmarklet

Background

I wanted a quick and easy way to link articles I read to their Hacker News thread, or submit an article if it was new to the community. This usually stemmed from finding an article on HN, saving it for later, then struggling to find the comment thread again.

Solution

This bookmarklet uses the HN Search by Algolia API to quickly lookup a url and append a html element to the top of the current page with relevant details. It looks something like this:

Y41 points by spking | 39 comments×

Bookmarklet

Drag the following link to your bookmarks bar: HN Search

Code

javascript: (function() {
    var e = document.createElement('div');
    e.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:40px;background-color:#F6F6EF;z-index:9999999999;position:fixed;border-bottom:1px solid #808080;font-family:Arial,sans-serif;line-height:42px;text-align:left;font-size:12px;color:#000;';
    e.innerHTML = '<a href=\'http://news.ycombinator.com\' style=\'display:inline-block;vertical-align:middle;background-color:#ff6600;color:#fff;border:1px solid #fff;height:30px;width:30px;text-align:center;margin:-3px 1em 0 1em;box-sizing:border-box;line-height:30px;text-decoration:none;\'>Y</a><span id=\'hnsearchbm_alert\'>Searching...</span><a href=\'javascript:void(0)\' onclick=\'this.parentNode.parentNode.removeChild(this.parentNode);\' style=\'float:right;text-decoration:none;color:#999;padding:0 1em;font-size:20px;\'&times;';
    document.body.insertBefore(e, document.body.childNodes[0]);
    var l = encodeURIComponent(window.location.href);
    var n = '<a href=\'http://news.ycombinator.com/submitlink?u=' + l + '&t=' + encodeURIComponent(document.title) + '\' style=\'text-decoration:underline;color:#ff6600;\'>';
    var s = 'Error (likely a Content Security Policy issue): <a href=\'https://hn.algolia.com/?query=' + l + '&sort=byPopularity&prefix=false&page=0&dateRange=all&type=story:\' style=\'text-decoration:underline;color:#ff6600;\'>Try searching manually.</a> (Or ' + n + 'submit it</a>.)';
    try {
        var r = new XMLHttpRequest;
        r.open('GET', 'https://hn.algolia.com/api/v1/search?query=' + l + '&tags=story', true)
    } catch (e) {
        document.getElementById('hnsearchbm_alert').innerHTML = s;
        return
    }
    r.onerror = function() {
        document.getElementById('hnsearchbm_alert').innerHTML = s
    };
    r.onload = function() {
        if (r.status >= 200 && r.status < 400) {
            var d = JSON.parse(r.responseText);
            if (d.hits.length != 0) {
                document.getElementById('hnsearchbm_alert').innerHTML = '' + d.hits[0].points + ' points by ' + d.hits[0].author + ' | <a href=\'https://news.ycombinator.com/item?id=' + d.hits[0].objectID + '\' style=\'text-decoration:underline;color:#ff6600;\'>' + d.hits[0].num_comments + ' comments</a>'
            } else document.getElementById('hnsearchbm_alert').innerHTML = 'No comment thread found. ' + n + 'Submit it?</a>'
        } else document.getElementById('hnsearchbm_alert').innerHTML = s
    };
    r.send()
})();

Favicon

You can also use this icon as a favicon: . Changing the favicon of a bookmarklet depends on browser, and is left as an exercise for the reader.

Base64 encoding follows:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABBUlEQVQ4T82TPU4DQQyFPxtlNteAA8BloKFAFAsXQKKhDwXiAmELkiYFOUVuAGWKwDU2IjaagR3tBhBIW4C7kezn9zMWepb0nOefANTn6sFsTyqeo6S65BDVh2JsUpfsI3qBcJLlOlPcbouKpyShPeAlu2vVFWZHwBLVx22fAsYaBbOD7EFk4dhlYcwjQNp+ppO0eQPswGC04vX+FF8u3jGdaQbIm51ZcLuKciJoahQB908AkUknhTTgzIo7O07S0tsZXCdrOtUw+RlABTaWWGxL+JJB9GE45iYxaDxwJ4jjo5fvPWgodwBihDEFg6AfzreFtFPIcQJFxbzp+9U/6HMPf38Lb5n7mVHvhXNKAAAAAElFTkSuQmCC

Known Limitations

Disclaimer

This product is not affiated with or endorsed by Y Combinator or Hacker News. All copyrights, trademarks, and what-have-you are the properties of their respective owners. No warranty or support expressed or implied.