Hacker News new | ask | show | jobs
by JayGuerette 1518 days ago
My version, better alignment, grayscaled icons, eliminates duplicates on navigation:

    // ==UserScript==
    // @name     hacker news favicons
    // @match  https://news.ycombinator.com/*
    // ==/UserScript==
    for (let link of document.querySelectorAll('.titlelink')) {
      if (link.attributes["hasIcon"] != 'true') {
        const domain = new URL(link.href).hostname
        const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`
        const image = document.createElement('img')
        link.attributes["hasIcon"] = 'true'
        image.src = imageUrl
        image.width = 16
        image.height = 16
        image.style.paddingRight = '0.50em'
        image.style.paddingLeft = '0.50em'
        image.style.verticalAlign = 'middle';
        image.style.filter = 'grayscale(1)';
        link.prepend(image)
      }
    }
2 comments

This had the cross origin issue for me. After combining with an above post that uses GM.addElement this looks really nice. Grayscale is the way to go to prevent the site from being more addictive than it needs to be.

* https://news.ycombinator.com/item?id=31096151

* https://gist.github.com/goldbattle/695f869e43fe8d0e628061cb9...

Afaik @include is depricated (at least I get a warning in FF), switch to // @match which is also safer. Details: https://wiki.greasespot.net/Metadata_Block / https://www.tampermonkey.net/changelog.php?ext=dhdg&show=dhd... (Since 4.4)
Thanks!