[HN Gopher] Show HN: Favicons for HN
___________________________________________________________________
Show HN: Favicons for HN
Author : frabert
Score : 285 points
Date : 2022-04-20 10:52 UTC (12 hours ago)
(HTM) web link (gist.github.com)
(TXT) w3m dump (gist.github.com)
| hsblhsn wrote:
| I made https://hn.hsblhsn.me which loads Opengraph data of the
| linked page as a preview of the content inside.
| sodimel wrote:
| 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 wrote:
| 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.
| Jimtrim wrote:
| Anybody have a Chrome-plugin version of this? Or should I look
| into making it when I get home? :)
| samber wrote:
| https://github.com/samber/refined-hn
| [deleted]
| colejohnson66 wrote:
| Install GreaseMonkey. It's a script you add yourself :)
| Jimtrim wrote:
| 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
| andreareina wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| I actually have this exact thought (just without the
| fallback) a few minutes ago.
| frabert wrote:
| 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.
| Jaruzel wrote:
| 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
| sodimel wrote:
| 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...
| sodimel wrote:
| I made a fork and added a small README:
| https://gist.github.com/corentinbettiol/6d9dc3a032c17ebcd94d...
| HeckFeck wrote:
| TIL that browsers support .ico format for inline images.
| dieulot wrote:
| 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 wrote:
| This modification works for me:
| https://greasyfork.org/en/scripts/443687-hn-favicons. It uses
| GM.addElement to bypass CSP restrictions.
| FlyingAvatar wrote:
| 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 wrote:
| Yeah, appears XHR/fetches are similarly blocked - was looking
| into data URIs. Good job HN for getting a decent CSP set up!
| noduerme wrote:
| 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 wrote:
| It's possible that GreaseMonkey on Firefox has different
| policies than other extensions on Chrome
| bscphil wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| With inline reply HN would decrease the number of requests
| needed to make replies, so it sounds like a net gain.
| mkdirp wrote:
| Sorry! I meant to integrate the favicons into the extension,
| not to integrate the extension into the website :)
| numbsafari wrote:
| 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.
| ryeguy_24 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| I had to add // @match https://news.ycombinator.com/* in the
| header to make it work in firefox.
| memorable wrote:
| Mine works with no addition, here on LibreWolf.
| prezjordan wrote:
| For violentmonkey, I needed // @inject-into content
| soheil wrote:
| 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.
| mirrorlake wrote:
| 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.
| gerardes wrote:
| nice, i like the idea. Maybe i'll add it to my HN extension.
| https://chrome.google.com/webstore/detail/hacker-news-watche...
| stffndtz wrote:
| Am I the only one getting a CSP error on this? (using Brave &
| Snippets)
| WithinReason wrote:
| Could be combined with HN avatars in a browser plugin:
|
| https://news.ycombinator.com/item?id=30668137
| [deleted]
| ziml77 wrote:
| 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 wrote:
| 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 wrote:
| That does look much better. Thank you
| vineshreddy007 wrote:
| I can imagine how it looks like, but a screenshot would be nice
| anyway.
| delfaras wrote:
| there's a screenshot just below posted by the author:
| https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a7...
| iqandjoke wrote:
| Nice though didn't work with AutoPagerize Chrome extension with
| page 2 onwards
| slk500 wrote:
| Please dont add any icons any more colors. I love that text-based
| interface.
| dexterdog wrote:
| So don't use it
| GiorgioG wrote:
| Neat. I tried it and (surprisingly!) found the icons too
| distracting.
| secondcoming wrote:
| 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?
| jagger27 wrote:
| It does not. Here's what it looks like without the images
| resized: https://i.imgur.com/sM2ymce.png
| [deleted]
| codesections wrote:
| 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...
| alberth wrote:
| 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 wrote:
| 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!
| [deleted]
| samber wrote:
| I just made a chrome extension:
| https://github.com/samber/refined-hn
|
| Publishing request is pending.
| [deleted]
| gus_massa wrote:
| Do you have a screenshot? I can imagine how it looks like, but a
| screenshot would be nice anyway.
| frabert wrote:
| Added one now!
| OliC wrote:
| You could update the screenshot now your link is near the top
| :)
| frabert wrote:
| I ended up following your advice ;)
| JayGuerette wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Thanks!
| duxup wrote:
| I've grown to hate icons for lists over time.
|
| Visually I find them messy and not helpful for filtering.
| olvy0 wrote:
| 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).
___________________________________________________________________
(page generated 2022-04-20 23:00 UTC)