Show HN: Favicons for HN | Hacker News Reader

Show HN: Favicons for HN

gist.github.com

310 pointsfrabert67 comments

Cool idea but I generally like the text-based meritocracy that exists now. I mostly go by post title rather than source. I would bet that I’d be influenced by sources more if I saw the source’s favicon. Just a hypothesis.

I've barely given it any thought, but I am more likely to click into submissions from particular domains already. That said, it's more of a secondary influence to the title.

Agreed, but also sad. In reality, and in our company, Features like this pile up and no one speaks up. Next thing you know, the product becomes a completely deranged version of original intention. People like you don't exist in every org who has a 1) meticulous understanding of the product and what could go wrong 2) Courage to speak up and not offend the people proposing the change 3) Change management's mind who has been sold the feature-full vision of the product.

Features need to be ruthlessly questioned.

Doesn’t work (at least for me in Chrome with Tampermonkey) due to Hacker News’s Content-Security-Policy header.

> Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src data: 'self' <URL>".

Overriding this would probably require an extension with a Service Worker that edits the CSP header.

This modification works for me: https://greasyfork.org/en/scripts/443687-hn-favicons. It uses GM.addElement to bypass CSP restrictions.

Ha, I literally just re-wrote the original code essentially identically to this.

Unfortunately, it still doesn't help in Tamper Monkey in Safari.

Yeah, appears XHR/fetches are similarly blocked – was looking into data URIs. Good job HN for getting a decent CSP set up!

All I need in my life right now is trying to debug someone else's XHR problems. Lord, why didn't you send me this sooner.

It's possible that GreaseMonkey on Firefox has different policies than other extensions on Chrome

Greasemonkey injects scripts into the content context [1], which is (arguably) more secure than injecting them directly into the page. From there they run with similar permissions to the extension which installs them. They can't be blocked by the page's CSP settings, and requests they make aren't subject to the same-origin policy. On the other hand, they're isolated from the page, which provides an additional layer of protection from the page accidentally getting access to privileged APIs like GM.xmlHttpRequest, which is a historic issue with user script managers.

ViolentMonkey supports this API, but unfortunately doesn't use it by default. You can enable it with `// @inject-into content` in the header.

Firefox additionally has an API and context specifically for user scripts (the userScript API), but GreaseMonkey doesn't use this unfortunately. A pull request adding support for it to either GM or ViolentMonkey would be nice if someone knowledgeable were so inclined. This API provides some additional protection (scripts are subject to SOP unless the extension breaks them out, and scripts are in addition isolated from each other), so it's a "nice-to-have" but not totally necessary if your user scripts come from trustworthy sources (i.e. you write them yourself).

[1] https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...

As an aside, there's Refined Hacker News[0] which seems like it would be a great option for this to be built into. It has lots of great features while keeping things minimal.

[0] https://github.com/plibither8/refined-hacker-news

Thanks for extensions.

But I think there's no need to integrate its functionality to the site. This way one can choose how to customize the site without increasing complexity of the site itself.

Sorry! I meant to integrate the favicons into the extension, not to integrate the extension into the website :)

With inline reply HN would decrease the number of requests needed to make replies, so it sounds like a net gain.

Tangent: try to make sure your websites serve the right favicon regardless of whether the user is logged in or not. Its honestly no big deal, but something I noticed writing the favicon service for synth.app (for tabs and such before we can calculate the favicon using the HTML).

For example, the google domains (gmail/cal/drive/etc) all show the same google accounts favicon [1] and we had to special case a few more.

[1] https://icons.duckduckgo.com/ip3/mail.google.com.ico

I had to add // @match https://news.ycombinator.com/* in the header to make it work in firefox.

For violentmonkey, I needed // @inject-into content

Mine works with no addition, here on LibreWolf.

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)
      }
    }

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!

For the curious, this is powered by DuckDuckGo's favicon service, which takes significant steps to preserve request privacy. Details at https://help.duckduckgo.com/duckduckgo-help-pages/privacy/fa...

Could be combined with HN avatars in a browser plugin:

https://news.ycombinator.com/item?id=30668137

Oh please don't.

I don't want HN to turn into something like slack that is filled with emojis and animated gifs.

It's just too much noise.

Did you know: This happens for each and every user individually, so no danger for the pure design of HN. I like the way it helps me orient where the links lead. I'll keep it for a week to see what changes. Hat tip to the author!

Do you have a screenshot? I can imagine how it looks like, but a screenshot would be nice anyway.

Added one now!

You could update the screenshot now your link is near the top :)

I ended up following your advice ;)

This came in just as I was about to submit my HackerNew extension to the store so I added it as an optional extra. Thanks @frabert!

HackerNew [1] adds a 'hideAll' button to the HN top bar and an 'Open in new tabs' control. This is a minimal, non distracting, change which optimizes my workflow of occasionally visiting HN throughout the day to gather a set of interesting stories to drill into but avoiding re-skimming the same stories on every visit. Source available [2]

[1] https://chrome.google.com/webstore/detail/hackernew/ehlfambi...

[2] https://github.com/tconfrey/HackerNew

I made an update that adds images in urls in comments too.

It shows smaller favicons, and it prevents adding new images when going back in history too :)

https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a7...

I made a fork and added a small README: https://gist.github.com/corentinbettiol/6d9dc3a032c17ebcd94d...

Am I the only one getting a CSP error on this? (using Brave & Snippets)

I personally have no desire to use it, but I appreciate that it's a significantly more efficient way of providing more info compared to a thumbnail.

This is one of the few places on the web where I'm not utterly overwhelmed by visual clutter, and I genuinely wish more sites had a 'no images/thumbnails' mode like HN.

N.B. this is going to send a request to duck duck go for every link which (a) some people aren't going to like, and (b) DDG might not like (I couldn't find any explicit policy for using their favicon service).

Google have the same service[1] if that's your thing.

I've been using it on a links heavy dashboard page for a couple of years now, and it always worked.

I'll probably switch to DDG now tho.

---

[1] https://www.google.com/s2/favicons?domain=example.com

This - an alternative approach could be to create the images with a URL of '{domain}/favicon.ico' and then add an onError event to switch the URL to the DDG URL only for instances where the site's favicon isn't in the default location.

Many sites have png favicons that may be stored anywhere. You kind of need to parse the HTML to be sure, and I guess that's what the DDG service does.

For sure, but even a lot of those sites maintain a favicon.ico to support legacy crawlers/systems - then for those that don't (i.e. trigger onError), falling back to DDG's icon is an easy way to skip all that parsing.

I actually have this exact thought (just without the fallback) a few minutes ago.

That's true, and if people don't like the idea of sending requests to DDG I completely understand. However regarding the increase in traffic: doing any kind of search on DDG sends a request for each link just like this script does, and I don't think the amount of users that are going to use this script is going to cause major issues. Still, it's a grey area and its use is not endorsed by DDG in any way.

Links usually don't display a favicon next to them only when you open the page the browser tab title does. It'd be pretty cluttered imo if random images were shown in an otherwise text-based environment.

I just made a chrome extension: https://github.com/samber/refined-hn

Publishing request is pending.

I made https://hn.hsblhsn.me which loads Opengraph data of the linked page as a preview of the content inside.

I was greeted by a blank page:

> Loading module from “https://hn.hsblhsn.me/assets/index.c8baae85.js” was blocked because of a disallowed MIME type (“text/plain”).

> The resource from “https://hn.hsblhsn.me/assets/index.49215043.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

Oops! This should not happen. I have a few explanations for the issue.

1. Your web browser is not supported. 2. You use some kind of strict browser feature or extension. 3. My code is crap.

I am going to solve point 3 soon.

This is a great way to leak HN reading to various sites and ad trackers.

I'd prefer to only share that information with sites I click on, and HN itself, of course.

Anybody have a Chrome-plugin version of this? Or should I look into making it when I get home? :)

https://github.com/samber/refined-hn

Install GreaseMonkey. It’s a script you add yourself :)

Getting the same error as mentioned in another comment.... might just make it myself later, with some local cache to not blast DuckDuckGo on site refresh

This should be added to Algolia's cool apps page:

https://hn.algolia.com/cool_apps

(It's linked from the bottom of each search result page, if you search from inside HN).

Is anyone who's good with CSS able to modify this to align the icon and text better? The current alignment where the baseline of the text is in line with the bottom of the favicon feels off.

If you set the width/height to 12px, set the image's left padding to 0, and center things vertically with flex, it looks significantly better.

  image.width = 12
  image.height = 12
  image.style.marginRight = '0.25em'
  //image.style.paddingRight = '0.25em'
  //image.style.paddingLeft = '0.25em'

  document.querySelectorAll('.athing > td:nth-child(3), .titlelink').forEach(e => { 
    e.style.display = 'flex',
    e.style.alignItems = 'center',
    e.style.marginRight = '0.25em'
  })

Screenshot: https://imgur.com/BN2wHgo

That does look much better. Thank you

I can imagine how it looks like, but a screenshot would be nice anyway.

there's a screenshot just below posted by the author: https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a7...

Does DuckDuckGo ensure that the icons are 16x16, or will it serve potentially 10’s or 100’s of KB of image only for my browser to resize them?

It does not. Here's what it looks like without the images resized: https://i.imgur.com/sM2ymce.png

nice, i like the idea. Maybe i'll add it to my HN extension. https://chrome.google.com/webstore/detail/hacker-news-watche...

I've grown to hate icons for lists over time.

Visually I find them messy and not helpful for filtering.

Nice though didn't work with AutoPagerize Chrome extension with page 2 onwards

Please dont add any icons any more colors. I love that text-based interface.

So don't use it

Neat. I tried it and (surprisingly!) found the icons too distracting.

TIL that browsers support .ico format for inline images.

Reply on news.ycombinator.com