☰

Add favicon to pinboard

Add favicon to pinboard bookmarks

  1. // ==UserScript==
  2. // @name         Add favicon to pinboard
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.2
  5. // @description  Add favicon to pinboard bookmarks
  6. // @author       yueyericardo
  7. // @match        https://pinboard.in/u:*
  8. // @icon         https://www.google.com/s2/favicons?domain=pinboard.in
  9. // @grant        GM_addStyle
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. GM_addStyle(`
  14. /* icon */
  15. .star {
  16.     width: 36px;
  17.     cursor: auto;
  18. }
  19. .star span{
  20.     cursor: pointer;
  21. }
  22. .star img{
  23.     width: 12px;
  24.     margin-left: 6px;
  25.     /* backdrop-filter: invert(1); */
  26. }
  27. .bookmark {
  28.     display: -webkit-inline-flex;
  29. }
  30. .display {
  31.     margin-left: 4px;
  32. }
  33.  
  34. /* tag */
  35. a.tag, a.filter{
  36.     border:1px solid #ccc;
  37.     padding:0px 6px;
  38.     -moz-border-radius: 10px;
  39.     border-radius: 10px;
  40. }
  41.  
  42. .description {
  43.     display: none;
  44. }
  45.  
  46. `);
  47.  
  48. (function() {
  49.     'use strict';
  50.  
  51.     function url_domain(data) {
  52.         var a = document.createElement('a');
  53.         a.href = data;
  54.         return a.hostname;
  55.     }
  56.  
  57.     function createElementFromHTML(htmlString) {
  58.         var div = document.createElement('div');
  59.         div.innerHTML = htmlString.trim();
  60.         return div.firstChild;
  61.     }
  62.  
  63.     function addLinkIcons(){
  64.         var bookmarks = document.getElementsByClassName('bookmark_title');
  65.         for (var i = 0; i < bookmarks.length; i++) {
  66.             var domain = url_domain(bookmarks[i].href);
  67.             // var domain_icon_url = `https://api.faviconkit.com/${domain}/16`;
  68.             // var domain_icon_url = `https://www.google.com/s2/favicons?sz=64&domain_url=${domain}`;
  69.             var domain_icon_url = `https://s2.googleusercontent.com/s2/favicons?sz=64&domain=${domain}`;
  70.             // var domain_icon_url = `https://besticon-demo.herokuapp.com/icon?url=${domain}&size=80`;
  71.             // var domain_icon_url = `https://f1.allesedv.com/${domain}`;
  72.             console.log(domain_icon_url);
  73.             var icon = createElementFromHTML(`<img class='url_icon' src=${domain_icon_url}>`)
  74.             bookmarks[i].parentElement.parentElement.children[0].appendChild(icon);
  75.         }
  76.     }
  77.  
  78.     addLinkIcons();
  79. })();