Favicons for HN

COPYING

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/>

favicons.js

// ==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)
}

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.

// ==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 :)

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

Publishing request is pending.

great idea!

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

@AntouanK go for it

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)
  }
}

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

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

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"

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?

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

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

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

Waiting for a Firefox extension :)

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

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

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

I get

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

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)
  }
}

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.

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

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

👍