9 ms·
Show HN: Favicons for HN
- duxup 4y agoI've grown to hate icons for lists over time. Visually I find them messy and not helpful for filtering.
- gus_massa 4y agoDo you have a screenshot? I can imagine how it looks like, but a screenshot would be nice anyway.
- Jimtrim 4y agoAnybody have a Chrome-plugin version of this? Or should I look into making it when I get home? :)
- colejohnson66 4y agoInstall GreaseMonkey. It’s a script you add yourself :)
- Jimtrim 4y agoGetting 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
- samber 4y agohttps://github.com/samber/refined-hn https://github.com/samber/refined-hn
- deleted 4y ago[deleted]
- andreareina 4y agoN.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 4y agoThis - 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 4y agoMany 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 4y agoFor 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 4y agoI actually have this exact thought (just without the fallback) a few minutes ago.
- frabert 4y agoThat'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.
- 4y ago
- dieulot 4y agoDoesn’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 4y agoIt's possible that GreaseMonkey on Firefox has different policies than other extensions on Chrome
- bscphil 4y agoGreasemonkey 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/WebExtensions/Content_scripts https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...
- lelandfe 4y agoYeah, appears XHR/fetches are similarly blocked – was looking into data URIs. Good job HN for getting a decent CSP set up!
- kappuchino 4y agoI had to add // @match https://news.ycombinator.com/ https://news.ycombinator.com/* in the header to make it work in firefox.
- memorable 4y agoMine works with no addition, here on LibreWolf.
- prezjordan 4y agoFor violentmonkey, I needed // @inject-into content
- WithinReason 4y agoCould be combined with HN avatars in a browser plugin: https://news.ycombinator.com/item?id=30668137 https://news.ycombinator.com/item?id=30668137
- samber 4y agoI just made a chrome extension: https://github.com/samber/refined-hn https://github.com/samber/refined-hn Publishing request is pending.
- deleted 4y ago[deleted]
- sodimel 4y agoI 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/48b12088441f6195ea9292c2a5a77e3a?permalink_comment_id=4139060#gistcomment-4139060 https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a7...
- sodimel 4y agoI made a fork and added a small README: https://gist.github.com/corentinbettiol/6d9dc3a032c17ebcd94dcbed27647b0b#file-readme-md https://gist.github.com/corentinbettiol/6d9dc3a032c17ebcd94d...
- ryeguy_24 4y agoCool 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 4y agoI'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 4y agoAgreed, 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 4y agoTangent: 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 https://icons.duckduckgo.com/ip3/mail.google.com.ico
- stffndtz 4y agoAm I the only one getting a CSP error on this? (using Brave & Snippets)
- ziml77 4y agoIs 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 4y agoIf 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 https://imgur.com/BN2wHgo
- ziml77 4y agoThat does look much better. Thank you
- slk500 4y agoPlease dont add any icons any more colors. I love that text-based interface.
- dexterdog 4y agoSo don't use it
- hsblhsn 4y agoI made https://hn.hsblhsn.me https://hn.hsblhsn.me which loads Opengraph data of the linked page as a preview of the content inside.
- sodimel 4y agoI was greeted by a blank page: > Loading module from “https://hn.hsblhsn.me/assets/index.c8baae85.js” 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” https://hn.hsblhsn.me/assets/index.49215043.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).
- hsblhsn 4y agoOops! 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 4y agoAs 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 https://github.com/plibither8/refined-hacker-news
- blue_pants 4y agoThanks 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.
- vineshreddy007 4y agoI can imagine how it looks like, but a screenshot would be nice anyway.
- delfaras 4y agothere's a screenshot just below posted by the author: https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a77e3a?permalink_comment_id=4139009#gistcomment-4139009 https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a7...
- alberth 4y agoOh 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 4y agoDid 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 4y agoLinks 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.
- gerardes 4y agonice, i like the idea. Maybe i'll add it to my HN extension. https://chrome.google.com/webstore/detail/hacker-news-watcher/ojkdgdapoebjekbklfpfjlccifecjeoo https://chrome.google.com/webstore/detail/hacker-news-watche...
- GiorgioG 4y agoNeat. I tried it and (surprisingly!) found the icons too distracting.
- numbsafari 4y agoThis 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 4y agoI 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 4y ago[deleted]
- deleted 4y ago[deleted]
- JayGuerette 4y agoMy 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) } }
- kappuchino 4y agoAfaik @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://wiki.greasespot.net/Metadata_Block / https://www.tampermonkey.net/changelog.php?ext=dhdg&show=dhdg&more=true https://www.tampermonkey.net/changelog.php?ext=dhdg&show=dhd... (Since 4.4)
- JayGuerette 4y agoThanks!
- goldbattle 4y agoThis 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://news.ycombinator.com/item?id=31096151 * https://gist.github.com/goldbattle/695f869e43fe8d0e628061cb96ed0049 https://gist.github.com/goldbattle/695f869e43fe8d0e628061cb9...
- secondcoming 4y agoDoes 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 4y agoIt does not. Here's what it looks like without the images resized: https://i.imgur.com/sM2ymce.png https://i.imgur.com/sM2ymce.png
- deleted 4y ago[deleted]
- codesections 4y agoFor 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/favicons/ https://help.duckduckgo.com/duckduckgo-help-pages/privacy/fa...
- olvy0 4y agoThis should be added to Algolia's cool apps page: https://hn.algolia.com/cool_apps https://hn.algolia.com/cool_apps (It's linked from the bottom of each search result page, if you search from inside HN).
- HeckFeck 4y agoTIL that browsers support .ico format for inline images.
- iqandjoke 4y agoNice though didn't work with AutoPagerize Chrome extension with page 2 onwards
- tconfrey 4y agoThis 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/ehlfambiaoomgjffbpjmmcaeafjeafgb https://chrome.google.com/webstore/detail/hackernew/ehlfambi... [2] https://github.com/tconfrey/HackerNew https://github.com/tconfrey/HackerNew