Readit News logoReadit News
Posted by u/frabert 4 years ago
Show HN: Favicons for HNgist.github.com/frabert/4...
ryeguy_24 · 4 years ago
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.
ddoolin · 4 years ago
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.
systemvoltage · 4 years ago
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.

dieulot · 4 years ago
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.

campital · 4 years ago
This modification works for me: https://greasyfork.org/en/scripts/443687-hn-favicons. It uses GM.addElement to bypass CSP restrictions.
FlyingAvatar · 4 years ago
Ha, I literally just re-wrote the original code essentially identically to this.

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

lelandfe · 4 years ago
Yeah, appears XHR/fetches are similarly blocked – was looking into data URIs. Good job HN for getting a decent CSP set up!
noduerme · 4 years ago
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.
frabert · 4 years ago
It's possible that GreaseMonkey on Firefox has different policies than other extensions on Chrome
bscphil · 4 years ago
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...

mkdirp · 4 years ago
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

blue_pants · 4 years ago
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.

mkdirp · 4 years ago
Sorry! I meant to integrate the favicons into the extension, not to integrate the extension into the website :)
kzrdude · 4 years ago
With inline reply HN would decrease the number of requests needed to make replies, so it sounds like a net gain.
parhamn · 4 years ago
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

kappuchino · 4 years ago
I had to add // @match https://news.ycombinator.com/* in the header to make it work in firefox.
prezjordan · 4 years ago
For violentmonkey, I needed // @inject-into content
memorable · 4 years ago
Mine works with no addition, here on LibreWolf.
JayGuerette · 4 years 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)
      }
    }

goldbattle · 4 years ago
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...

kappuchino · 4 years ago
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)
JayGuerette · 4 years ago
Thanks!
codesections · 4 years ago
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...
WithinReason · 4 years ago
Could be combined with HN avatars in a browser plugin:

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