Google Chat / Hangouts does not show notification badge

[tamas646]

Preflight Checklist

• [X] I agree to follow the Code of Conduct that Ferdium Recipes adheres to.
• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Ferdium Version

6.7.0

Recipe Name

Hangouts Chat

Recipe Version

1.8.0

Last Known working version of the recipe

No response

Steps to reproduce

1. Open Hangouts Chat
2. Wait for some messages

Expected Behavior

Ferdium should show the unread messages count on the badge.

Actual Behavior

Ferdium does not show the count of unread messages.

Screenshots

No response

Additional Information

I tried to solve the issue by fixing the query selector string in webview.js, but I think it's impossible to query the message count because it's inside an iframe which cannot be reached from outside without violating the cross-origin policy:

Uncaught DOMException: Blocked a frame with origin "https://mail.google.com" from accessing a cross-origin frame

The main window loads https://mail.google.com/ and https://chat.google.com/ is inside an iframe. I tried to open the iframe url itself in a browser but it displayed an empty page.

Any ideas on how to query the inner document of this iframe? Or maybe how to load only chat.google.com without the need of an iframe?

The new query selector strings:

const directMessageSelector = 'div#c13 div.zY9JEf.TeR7uc';
const indirectMessageSelector = 'div#c19 div.zY9JEf.TeR7uc';

[rchybicki]

While I also tried and also don't know the workaround for the iframe, I'm using: directCount = document.querySelectorAll('link[href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_r3.ico"]').length;

Which at least shows me a 1 when I have something unread.

[marcoduering]

Has a solution been found yet? I followed the steps described by @rchybicki and it initially worked, but unfortunately, it has stopped working now.

[rchybicki]

This a fix for my workaround: directCount = document.querySelectorAll('link[href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_r3.ico"]').length + document.querySelectorAll('link[href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_r4.ico"]').length;

[Lenitr]

This a fix for my workaround: directCount = document.querySelectorAll('link[href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_r3.ico"]').length + document.querySelectorAll('link[href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_r4.ico"]').length;

Thanks, this solution works for me too, hope the new release includes this 😅

[marcoduering]

Stopped working again for me. And on top, I now always get push notifications to my phone, even if Google Chat in Ferdium is open and in front. So frustrating :-(

[rchybicki]

and another fix, different approach, might "live" longer: directCount = document.querySelectorAll('link[href^="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_"][href$=".ico"]').length;

[daniel-nevis]

@rchybicki I'm relatively new to Ferdium and I'd like to try and use your suggestion for Google Chat (since the unread badge/counter doesn't work for me either), but I'm not sure where I should copy/paste and use the code correctly. Could you give me a hint, please? I'd appreciate a lot a guide to use this properly.

[rchybicki]

@rchybicki I'm relatively new to Ferdium and I'd like to try and use your suggestion for Google Chat (since the unread badge/counter doesn't work for me either), but I'm not sure where I should copy/paste and use the code correctly. Could you give me a hint, please? I'd appreciate a lot a guide to use this properly.

Hi @daniel-nevis, Here's what you need to do - first, you need to locate ferdium recipes to get to the hangouts recipe, on my mac this is under: /Users/%username%/Library/Application Support/Ferdium/recipes/hangoutschat/ You'll have to google the recipe path on Windows if you're on Windows once there you have to edit webview.js

And update the middle of the file to look like this:

module.exports = Ferdium => {
  // if the user is on googlechat landing page, go to the login page.
  if (
    location.hostname === 'workspace.google.com' &&
    location.href.includes('products/chat/')
  ) {
    location.href =
      'https://accounts.google.com/AccountChooser?continue=https://chat.google.com/?referrer=2';
  }

  // class corresponding to the bold text that is visible for room messages
  const indirectMessageSelector = 'div.V6.CL.V2.X9.Y2 span.akt span.XU';

  const getMessages = () => {
    // get unread direct messages
    let directCount;
    let indirectCount;

    // get unread messages count
    directCount = document.querySelectorAll(
      'link[href^="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon_chat_new_notif_"][href$=".ico"]',
    ).length;

    // get unread indirect messages
    const indirectCountSelector = document.querySelector(
      indirectMessageSelector,
    );
    if (indirectCountSelector) {
      indirectCount = Number(indirectCountSelector.textContent);
    }

    // set Ferdium badge
    Ferdium.setBadge(directCount, indirectCount);
  };

After that, restart the service in ferdium, and you should see unread messages

[daniel-nevis]

@rchybicki Thank you a lot! Appreciate your help :)

I use several Google Chat accounts (I guess Hangouts in the current context is the same thing), and I'm on a Mac, so I'll follow your guide and see if it works for me too.

Thanks again!

[ilopmar]

I'm using latest 6.7.5 version and I've applied this patch today. It works for mentions (red dot badge) but it doesn't work for unread messages (blue dot badge). Is there a way to fix that to behave like Slack and have both badges?

[Braintelligence]

Due to cross-origin issues you don't really have a way of fetching the number of actual messages directly.

My workaround was copying the recipe for gmail, changing the URL in package.json to always go into chat instead of mails and then remove everything but the chat message counter in the webview. Works fine.

[JackMBurch]

For me the issue was on the google chat service, and swapping to the hangouts service worked. Are you sure you're using the hangouts service instead of the chat service? It looks like the hangouts service uses chat.google.com instead of mail.google.com, similar to @Braintelligence's fix.