HN Explorer

72 comments

[ 3.1 ms ] story [ 142 ms ] thread
gus_massa
Do you have a screenshot? I can imagine how it looks like, but a screenshot would be nice anyway.
frabert
Added one now!
OliC
You could update the screenshot now your link is near the top :)
frabert
I ended up following your advice ;)
Jimtrim
Anybody have a Chrome-plugin version of this? Or should I look into making it when I get home? :)
colejohnson66
Install GreaseMonkey. It’s a script you add yourself :)
Jimtrim
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
[deleted]
(comment deleted)
andreareina
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).
anais9
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.
Beltalowda
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.
anais9
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.
memorable
I actually have this exact thought (just without the fallback) a few minutes ago.
frabert
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.
dieulot
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.

frabert
It's possible that GreaseMonkey on Firefox has different policies than other extensions on Chrome
bscphil
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...

lelandfe
Yeah, appears XHR/fetches are similarly blocked – was looking into data URIs. Good job HN for getting a decent CSP set up!
noduerme
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.
ryeguy_24
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
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
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.

parhamn
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

stffndtz
Am I the only one getting a CSP error on this? (using Brave & Snippets)
ziml77
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.
dgut
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
ziml77
That does look much better. Thank you
slk500
Please dont add any icons any more colors. I love that text-based interface.
hsblhsn
I made https://hn.hsblhsn.me which loads Opengraph data of the linked page as a preview of the content inside.
sodimel
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).

hsblhsn
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.

mkdirp
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
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.

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

kappuchino
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!
soheil
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.
GiorgioG
Neat. I tried it and (surprisingly!) found the icons too distracting.
numbsafari
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.

mirrorlake
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.

[deleted]
(comment deleted)
[deleted]
(comment deleted)
JayGuerette
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)
      }
    }