Greasy Fork

So basically I want to have an icon with a badge for when there's a new message, just like what discord does.

I've tried changing the href value of the meta tag in the head, but it doesn't work.

it doesn't work

Why? First link from google is working for me

Why? First link from google is working for me

I think you misunderstood

Credit: ChatGPT

function replacePageIcon(iconUrl) {
  var link = document.querySelector("link[rel~='icon']");

  if (link) {
    link.href = iconUrl;
  } else {
    link = document.createElement("link");
    link.rel = "icon";
    link.href = iconUrl;
    document.head.appendChild(link);
  }
}

replacePageIcon('https://media0.giphy.com/media/6tFe2NtvrwMDVuztDI/giphy.gif?cid=ecf05e47u7c53icg252rj6wvfanbfktxkkzrth6wbm3eu642&ep=v1_gifs_search&rid=giphy.gif&ct=g')

Note:

Refused to load the image 'https://image.similarpng.com/very-thumbnail/2020/05/Facebook-logo-with-notifications-icon-PNG.png' because it violates the following Content Security Policy directive: "img-src .fbcdn.net *.facebook.com data: https://.fbsbx.com *.tenor.co media.tenor.com facebook.com *.cdninstagram.com fbsbx.com fbcdn.net *.giphy.com connect.facebook.net *.carriersignal.info blob: android-webview-video-poster: googleads.g.doubleclick.net www.googleadservices.com *.whatsapp.net *.fb.com *.oculuscdn.com".

Your replacement icon shall be located in the one of the above websites.

Your replacement icon shall be located in the one of the above websites.

or just base64

and to only show that icon when there's a new message? revert back after?

and to only show that icon when there's a new message? revert back after?

I asked ChatGPT to help you.
I didn't test it, but it looks great.

https://chat.openai.com/share/08869ea9-ddac-4dc0-8af9-1224f387b98e

and to only show that icon when there's a new message? revert back after?

I asked ChatGPT to help you.
I didn't test it, but it looks great.

https://chat.openai.com/share/08869ea9-ddac-4dc0-8af9-1224f387b98e

Just forgot the revert back.
Check the updated ChatGPT response.

https://chat.openai.com/share/eadb054a-73b7-4141-9ed4-076f27529ba4

I think you can base on this to further develop.

Updated code as follows:

// ==UserScript==
// @name         Facebook Alert UserScript
// @namespace    your-namespace
// @version      1.0
// @description  Adds an alert icon to the page based on Facebook notifications and messages.
// @match        https://www.facebook.com/*
// @run-at       document-idle
// ==/UserScript==

(function () {
  'use strict';

  let isAlertIconShown = false;

  let myRevertedIcon = '';
  const myAlertIcon = 'https://media0.giphy.com/media/6tFe2NtvrwMDVuztDI/giphy.gif?cid=ecf05e47u7c53icg252rj6wvfanbfktxkkzrth6wbm3eu642&ep=v1_gifs_search&rid=giphy.gif&ct=g';


  function replacePageIcon(iconUrl) {
    if(!iconUrl) return;
    var link = document.querySelector("link[rel~='icon']");

    if (link) {
      if (!isAlertIconShown && !myRevertedIcon) myRevertedIcon = link.href;
      link.href = iconUrl;
    } else {
      link = document.createElement("link");
      link.rel = "icon";
      link.href = iconUrl;
      document.head.appendChild(link);
    }
  }



  // Function to check if notifications or messages have empty content
  function checkEmptyContent() {
    let allEmpty = !document.title.startsWith('(');

    // Revert icon if all content is empty
    if (allEmpty && isAlertIconShown) {
      replacePageIcon(myRevertedIcon);
      isAlertIconShown = false;
    }
  }

  // Function to check if notifications or messages have unread content
  function checkUnreadContent() {

    let anyNonEmpty = document.title.startsWith('(') && /\(\d+\)\s\S/.test(document.title);

    // Replace icon if any content is non-empty
    if (anyNonEmpty && !isAlertIconShown) {
      replacePageIcon(myAlertIcon);
      isAlertIconShown = true;
    }
  }

  let oldTitle = '';

  // Function to handle the onReady event
  function onReady() {

    let p = function () {

      if (oldTitle !== document.title) {

        oldTitle = document.title;

        setTimeout(() => {
          if (isAlertIconShown) {
            checkEmptyContent();
          } else {
            checkUnreadContent();
          }
        }, 1)


      }

    }
    const observer = new MutationObserver(p);

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
    p();
  }

  // Check document ready state and add event listener if necessary
  Promise.resolve().then(() => {
    if (document.readyState !== 'loading') {
      onReady();
    } else {
      window.addEventListener("DOMContentLoaded", onReady, false);
    }
  });

})();