Skip to content

Instantly share code, notes, and snippets.

@frabert
Last active Sep 27, 2022
Embed
What would you like to do?
Favicons for HN
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <http://unlicense.org/>
// ==UserScript==
// @name Favicons for HN
// @version 1
// @grant none
// ==/UserScript==
for(let link of document.querySelectorAll('.titlelink')) {
const domain = new URL(link.href).hostname
const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`
const image = document.createElement('img')
image.src = imageUrl
image.width = 16
image.height = 16
image.style.paddingRight = '0.25em'
image.style.paddingLeft = '0.25em'
link.prepend(image)
}
@frabert
Copy link
Author

frabert commented Apr 20, 2022

Add this script to GreaseMonkey or any other way to automatically execute it on page load, and enjoy having favicons of the link's url on the side of the submission title

EDIT: Some people have noted that this does not work on Chrome. Per this comment, try adding a // @inject-into content header and use ViolentMonkey instead.

@frabert
Copy link
Author

frabert commented Apr 20, 2022

image

@corentinbettiol
Copy link

corentinbettiol commented Apr 20, 2022

// ==UserScript==
// @name         Favicons for HN
// @version      1.1
// @grant        none
// @homepageURL  https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a77e3a#file-favicons-js
// @match        https://*.ycombinator.com/*
// ==/UserScript==

for(let link of document.links) {
  if(!link.href.match("ycombinator.com") && !link.href.match("javascript:void") && link.firstChild.nodeName !== "IMG"){
    const domain = new URL(link.href).hostname
    const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`
    const image = document.createElement('img')
    image.src = imageUrl
    image.width = 12
    image.height = 12
    image.style.paddingRight = '0.25em'
    image.style.paddingLeft = '0.25em'
    link.prepend(image)
  }
}

This update show smaller favicons, and show them for links in comments too. It prevents adding new images when going back in history too :)

image

@samber
Copy link

samber commented Apr 20, 2022

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

Publishing request is pending.

@AntouanK
Copy link

AntouanK commented Apr 20, 2022

great idea!

@frabert would be ok to steal it for my HN reader?
( https://hack.ernews.info )

@frabert
Copy link
Author

frabert commented Apr 20, 2022

@AntouanK go for it

@maxtheaxe
Copy link

maxtheaxe commented Apr 20, 2022

added a quick check for existing favicons on the page (e.g. if you hit the back button)

// ==UserScript==
// @name     Favicons for HN
// @version  1.1
// @grant    none
// @match https://*.ycombinator.com/*
// ==/UserScript==

// check for existing favicons (in case of back button)
var favicons = document.getElementsByClassName('favicon-script');
if (!(favicons.length > 0)) {
  // add favicons alongside each post title
  for(let link of document.querySelectorAll('.titlelink')) {
    const domain = new URL(link.href).hostname
    const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`
    const image = document.createElement('img')
    image.src = imageUrl
    image.className = 'favicon-script'
    image.width = 16
    image.height = 16
    image.style.paddingRight = '0.25em'
    image.style.paddingLeft = '0.25em'
    link.prepend(image)
  }
}

@seguri
Copy link

seguri commented Apr 20, 2022

This can't work just as a bookmarklet, right?

Refused to load the image 'https://icons.duckduckgo.com/ip3/gist.github.com.ico' because it violates the following Content Security Policy directive: "img-src 'self' https://account.ycombinator.com".

@frabert
Copy link
Author

frabert commented Apr 20, 2022

@seguri Indeed, this doesn't seem to work for Chrome

@corentinbettiol
Copy link

corentinbettiol commented Apr 20, 2022

added a quick check for existing favicons on the page (e.g. if you hit the back button)

Why add a new class when you can check that the first child of the link is not an img?

link.firstChild.nodeName !== "IMG"

@GTP95
Copy link

GTP95 commented Apr 20, 2022

This code would be useful to make browser extensions and similar, could you please specify under which license it is shared so everyone knows whether he/she can use it or not?

@frabert
Copy link
Author

frabert commented Apr 20, 2022

@GTP95 This script is so simple I don't think it would necessitate any kind of approval, but consider it public domain. If public domain is not a thing in your country, consider it under the zlib license.

@BILY5354
Copy link

BILY5354 commented Apr 20, 2022

I added the script and the result is as follows. Why it doesn't work?
image

@frabert
Copy link
Author

frabert commented Apr 20, 2022

@agamm
Copy link

agamm commented Apr 20, 2022

Waiting for a Firefox extension :)

@BILY5354
Copy link

BILY5354 commented Apr 20, 2022

@frabert yes. I add the script to Tampermonkey on Chrome. And now it works when i add this. Thanks, nice tool.^-^

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

Publishing request is pending.

@phrz
Copy link

phrz commented Apr 20, 2022

@BILY5354 are you on Chrome? I added a note here https://gist.github.com/frabert/48b12088441f6195ea9292c2a5a77e3a?permalink_comment_id=4138989#gistcomment-4138989

It appears that Safari + Tampermonkey has the same Content Security problem and @inject-into content does not help.

@BILY5354
Copy link

BILY5354 commented Apr 20, 2022

@phrz
Yes. I tried to use ```@inject-into content```` but it didn't work. So I use the Chrome extension.

@9mm
Copy link

9mm commented Apr 20, 2022

I get

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

@3rd
Copy link

3rd commented Apr 20, 2022

Smaller and centered images, based on @maxtheaxe's version, works in Chrome with Violentmonkey.

// ==UserScript==
// @name     Favicons for HN
// @version  1.1
// @grant    none
// @match https://*.ycombinator.com/*
// @inject-into content
// ==/UserScript==

// check for existing favicons (in case of back button)
var favicons = document.getElementsByClassName('favicon-script');
if (!(favicons.length > 0)) {
  // add favicons alongside each post title
  for(let link of document.querySelectorAll('.titlelink')) {
    const domain = new URL(link.href).hostname
    const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`
    const image = document.createElement('img')
    image.src = imageUrl
    image.className = 'favicon-script'
    image.width = 14;
    image.height = 14;
    image.style.paddingRight = '0.25em'
    image.style.paddingLeft = '0.25em'
    link.style.display = "inline-flex";
    link.style.alignItems = "center";
    link.style.justifyContent = "center";
    link.prepend(image)
  }
}

@HookedBehemoth
Copy link

HookedBehemoth commented May 2, 2022

I get

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

I found that too when I enabled javascript. Disabling that made it work again.

@mminer237
Copy link

mminer237 commented Sep 27, 2022

Looks like Hacker News removed the titlelink class and broke it. Updating the querySelector fixes it: https://gist.github.com/mminer237/8910996296765a5570505f5b8730086a#file-favicons-js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment