• Browser
  • Mail
  • News
  • Community
  • About
Register Login
HomeBlogsForumThemesSocial

Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Customizations & Extensions
    4. Modifications
    5. Feed icons

    Feed icons

    Modifications
    modding javascript
    3
    5
    388
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • tam710562T
      tam710562
      last edited by tam710562

      What?
      This is a small mod that converts feed icons into website icons.

      Demo

      20220313_TxgfTo77R1_vivaldi.png

      Installation
      You can learn how to install here.

      Javascript:

      /*
       * Feed icons
       * Written by Tam710562
       */
      
      (function () {
        'use strict';
      
        const gnoh = {
          createElement: function (tagName, attribute, parent, inner, options) {
            if (typeof tagName === 'undefined') {
              return;
            }
            if (typeof options === 'undefined') {
              options = {};
            }
            if (typeof options.isPrepend === 'undefined') {
              options.isPrepend = false;
            }
            const el = document.createElement(tagName);
            if (!!attribute && typeof attribute === 'object') {
              for (const key in attribute) {
                if (key === 'text') {
                  el.textContent = attribute[key];
                } else if (key === 'html') {
                  el.innerHTML = attribute[key];
                } else if (key === 'style' && typeof attribute[key] === 'object') {
                  for (const css in attribute.style) {
                    el.style[css] = attribute.style[css];
                  }
                } else if (key === 'events' && typeof attribute[key] === 'object') {
                  for (const event in attribute.events) {
                    if (typeof attribute.events[event] === 'function') {
                      el.addEventListener(event, attribute.events[event]);
                    }
                  }
                } else if (typeof el[key] !== 'undefined') {
                  el[key] = attribute[key];
                } else {
                  if (typeof attribute[key] === 'object') {
                    attribute[key] = JSON.stringify(attribute[key]);
                  }
                  el.setAttribute(key, attribute[key]);
                }
              }
            }
            if (!!inner) {
              if (!Array.isArray(inner)) {
                inner = [inner];
              }
              for (let i = 0; i < inner.length; i++) {
                if (inner[i].nodeName) {
                  el.append(inner[i]);
                } else {
                  el.append(this.createElementFromHTML(inner[i]));
                }
              }
            }
            if (typeof parent === 'string') {
              parent = document.querySelector(parent);
            }
            if (!!parent) {
              if (options.isPrepend) {
                parent.prepend(el);
              } else {
                parent.append(el);
              }
            }
            return el;
          },
          createElementFromHTML: function (html) {
            return this.createElement('template', {
              html: (html || '').trim()
            }).content;
          },
          timeOut: function (callback, conditon, timeout) {
            setTimeout(function wait() {
              let result;
              if (!conditon) {
                result = document.getElementById('browser');
              } else if (typeof conditon === 'string') {
                result = document.querySelector(conditon);
              } else if (typeof conditon === 'function') {
                result = conditon();
              } else {
                return;
              }
              if (result) {
                callback(result);
              } else {
                setTimeout(wait, timeout || 300);
              }
            }, timeout || 300);
          },
          observeDOM: function (obj, callback, config) {
            const obs = new MutationObserver(function (mutations, observer) {
              if (config) {
                callback(mutations, observer);
              } else {
                if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
                  callback(mutations, observer);
                }
              }
            });
            obs.observe(obj, config || {
              childList: true,
              subtree: true
            });
          }
        };
      
        let settings = {};
      
        function addIcon(currentIcon, url) {
          if (currentIcon) {
            const imgIcon = gnoh.createElement('img', {
              width: 16,
              height: 16,
              style: {
                flex: '0 0 auto',
                alignSelf: 'center',
                margin: 'auto 6px auto 16px'
              },
              srcset: `chrome://favicon/size/16@1x/${url} 1x,chrome://favicon/size/16@2x/${url} 2x`
            });
            currentIcon.parentNode.replaceChild(imgIcon, currentIcon);
          }
        }
      
        function getSettings(callback) {
          vivaldi.prefs.get('vivaldi.rss.settings', function (feedSettings) {
            settings = feedSettings.reduce(function (previousValue, currentValue) {
              previousValue[currentValue.path] = currentValue;
              return previousValue;
            }, {});
            callback();
          });
        }
      
        function speedFeedIcons(panelsContainer) {
          const feeds = Array.from(panelsContainer.querySelectorAll('[data-id^="FEEDS_LABELS_"]:not([data-feed-icon="true"]'));
          feeds.forEach(function (feed) {
            feed.dataset.feedIcon = true;
            try {
              const path = /FEEDS_LABELS_(.*)/.exec(feed.dataset.id)[1];
              if (settings[path]) {
                const url = new URL(settings[path].url).origin;
                if (url !== 'null') {
                  addIcon(feed.querySelector('.folder-icon'), url);
                }
              } else {
                getSettings(function () {
                  if (settings[path]) {
                    const url = new URL(settings[path].url).origin;
                    if (url !== 'null') {
                      addIcon(feed.querySelector('.folder-icon'), url);
                    }
                  }
                });
              }
            } catch (e) {
              console.error(e)
            }
          });
        }
      
        gnoh.timeOut(function (panelsContainer) {
          getSettings(function () {
            gnoh.observeDOM(document, function () {
              speedFeedIcons(panelsContainer);
            });
          });
        }, '#panels-container');
      })();
      

      Changelog

      13/03/2022

      • Create the first version.

      06/04/2022

      • Fix getting the feed's url
      luetageL Y 2 Replies Last reply Reply Quote 4
      • luetageL
        luetage @tam710562
        last edited by

        @tam710562 I don’t use the feeds panel, but I tested it and it errors out in my case.

        github ◊ vfm

        1 Reply Last reply Reply Quote 1
        • Y
          yakn99925566 @tam710562
          last edited by

          @tam710562
          in 5.2.2623.24 (Stable channel) (64-bit) , it might not work properly.

          1 Reply Last reply Reply Quote 1
          • tam710562T
            tam710562
            last edited by

            @luetage @yakn99925566
            Thanks for your feedback
            The feed storage structure has changed since I added my feeds. Too bad I didn't test it.
            I have updated the mod hope it will work

            luetageL 1 Reply Last reply Reply Quote 2
            • luetageL
              luetage @tam710562
              last edited by

              @tam710562 Thanks for the update. Works now. It also adds feed favicons in the mail panel.

              github ◊ vfm

              1 Reply Last reply Reply Quote 1
              • 1 / 1
              • First post
                Last post

              Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.

              Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status