Skip to content

Instantly share code, notes, and snippets.

@frabert
Last active December 21, 2023 13:35
Show Gist options
  • Save frabert/48b12088441f6195ea9292c2a5a77e3a to your computer and use it in GitHub Desktop.
Save frabert/48b12088441f6195ea9292c2a5a77e3a to your computer and use it in GitHub Desktop.
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)
}
@AntouanK
Copy link

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

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

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

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

@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

@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

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

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

@amra
Copy link

amra commented Oct 21, 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