DIY Google Hangouts Client Independent of Chrome Browser

Hangouts Logo

Safari, Chrome and Battery Life

Remember when Chrome was new and fast and light and minimalist? The name Chrome was meant an in-joke to the UX jargon chrome, meaning the frame around an app. Chrome was just a frame to view the web. Those days are long gone. Now that Chrome has a plurality market share, Google is positioning it as an enhanced web experience, just like Microsoft did with IE. Chrome is a great browser but it also wants to be an operating system that has its own launcher and app ecosystem. It literally is an operating system when packaged as Chrome OS. Chrome is a large application these days.

With the power management improvements and battery shaming Apple built into OS X 10.9 and 10.10, is has become clear to me that Chrome requires a lot of power and memory to run. Running Chrome with only core Google plugins and extensions for Hangouts and Drive, I get about 2 hours less battery life on my 2014 15″ MacBook Pro 11,2. To put that in perspective, it is the same ballpark that I lose if I fire up VMWare to run my Windows Server 2012 R2 with Visual Studio. Running Chrome is literally a similar workload to running a hypervisor running a whole other operating system.

Enough with the Extensions

Transitioning away from Chrome is not easy, especially if you get hooked on the extension and app ecosystem. Without my even realizing it, I left the Open Web and moved into Google’s Web. I hadn’t really paid attention but it turns out that the extensions themselves each consume a lot of resources and I have run into extensions that monetize with sneaky tricks. My first step to wean myself out of this cesspool was to go on an acetic extension diet. In Chrome, I have two extensions:

In Safari and Firefox, I only have the Adblock Plus extension and nothing else.

(AdBlock Plus has become a controversial topic because of their extortion of big sites as a monetization strategy. I’ve turned off “acceptable ads” and I don’t want to see any ads. If it wasn’t AdBlock Plus, I would use something else and have done so in the past. This may make me a bad person. I don’t care. The ad networks are now a malware vector and the quantity of the ads is overwhelming. The internet needs a new monetization strategy.)

Hangouts and XMPP/Jabber

The extension diet caused me a problem because it killed Hangouts. We use Hangouts at my company so that’s a problem. I tried using the XMPP/Jabber protocol gateway to Hangouts but it is unsatisfactory:

  • The Jabber client stream doesn’t include any messages sent or received when Jabber is not connected
  • Jabber gets disconnected all the time
  • Voice and Video don’t work, although they used to when Hangouts was Google Talk
  • Google Voice voicemail messages are not delivered to Jabber
  • Google Voice SMS integration doesn’t work

So basically the XMPP gateway for Hangouts sucks.

Roll Your Own Hangouts.app With Fluid.app

It turns out that there is a Hangouts page on Google+. This page works in Chrome but also in Safari and Firefox. Pretty much everything in the Hangouts works. The only problem is that I can’t remember to open a browser window and point it there.

If you kind of squint at the Hangouts Google+ page, it kind of looks like a cross between the Hangouts Chrome extension and the Hangouts Chrome app for Windows but with a bunch of other crap in there too. I got the idea that I could get something similar to the Hangouts App for Chrome for Windows and Chrome OS on OS X if I used Fluid.app to roll my own native app wrapper for Hangouts. Fluid.app is a tool for generating WebKit site wrapper apps and it works pretty well to solve my Hangouts problem.

  • Chat history works
  • SMS and Voicemail works
  • Voice and Video works
  • It does everything that I want it to do
  • I can even pop out chats in and out of a tab or new window

Screen Shot 2015 02 11 at 12 19 25 PM
Screen Shot 2015 02 11 at 12 24 11 PM

Recipe

Fluid.app is a pretty geeky tool but the recipe to create a Hangouts app is pretty simple. At the most basic level, you can just create a new Fluid app by pointing to https://plus.google.com/hangouts and be done. It will not work correctly until you set user agent string for your new Hangouts.app to be Safari 7 but once you do that, it will work fine. You can use the Hangouts logo at the top of this article for the Dock icon.

By default Fluid apps use Safari’s cookies and will load Safari plugins. That means my Hangouts.app Just WorksTM. I am logged in by my Google Apps token in Safari. The Google Voice and Video plugin that I installed for Chrome also works in Safari and in the Hangouts.app to enable voice and video.

If you want to keep Hangouts open, even if you close the window, then in the Hangouts.app Preferences go to Behavior and select “Closing the last browser window: only hides the window”.

If you want it to be more minimalist standalone app look, then it is mostly a matter of hiding elements with some custom CSS injection in the Window > Userstyles menu.

Pattern: *plus.google.com*hangouts*

    div.Ege.qMc {
        visibility:hidden;
    }

    div#gbq {
        visibility:hidden;
    }

    div.gb_8.gb_Sc.gb_i.gb_Rc.gb_Qc {
        visibility:hidden;
    }

    div.ona.Fdb.csa {
        visibility:hidden;
    }

    div.Dge.fOa.vld {
        visibility:hidden;
    }

    div.Ima.dacD0d {
        visibility:hidden;
    }

    div.Bdc.FQb {
        visibility:hidden;
    }

And to add a little slickness add a little Userscript to fix the logo link so it links to /hangouts to pop out the buddy list by default as shown in my screenshots.

Pattern: *plus.google.com*hangouts*

    var i=0, 
        a = document.getElementsByClassName('gb_Wa gb_Ra'); //home logo link

    for(i=0; i<a.length; i++) {
        a[i].href='/hangouts';
    }

    window.onload = function() {
        setTimeout(function() {
        var j, h = document.getElementsByClassName('qoeSyc uoNTwd'); //hangouts buddy list icon element
        for(j=0; j<h.length; j++) {
            h[j].click(); //open the buddy list
        }
       }, 3000);
    };

Overall, I’m pretty pleased with how this turned out. I’m able to easily control my logged-in status on Hangouts by launching or exiting the app from my Dock. All the key feautures of Hangouts that I use work.

Update

These instructions are now obsolete. Google has created a standalone website for Hangouts at https://hangouts.google.com/. This site works great as a Fluid app without having to do any of the javascript and css hacks described above.

Screen Shot 2015 08 20 at 10 36 32 AM

Advertisements

14 Responses to DIY Google Hangouts Client Independent of Chrome Browser

  1. Dan McG says:

    This works brilliantly! Thanks!

    I just logged in with two fluid apps (one for each Google account). Hopefully I can figure out a nice clean way to have each icon launch for the proper account. I haven’t tried that part as of yet.

    • Brian Reiter says:

      I just pick one of my Google accounts to use for Hangouts on all my devices. However, Fluid has the option of using its own cookies instead of sharing them with Safari. That seems like it might work to be a mechanism to keep the logins totally independent.

      Look in Security Preferences: Cookie Storage.

    • Brian Reiter says:

      No. I am in the mode of turning off toasts and notifications as much as possible. They really distract me.

      The app does ring with incoming calls, though. And my phone does too. It’s pretty hard to miss for me.

      If you figure it out, let me know. It is probably possible with enough effort.

  2. Fernando Torales - Acosta says:

    Thanks for the guide, sms works amazingly well. I am however having trouble calling. I’ve installed the plug for voice and video calls on my mac, but the newly made Hangouts.app will either ask for the plug in to be installed, or if not will start “ringing” but never actually reach my phone during tests. Any advice?

  3. Tom Olmsted says:

    Brian – this seems like it could the flawless solution as I’m an avid Fluid user. Have you handled notifications? I’m unable to make mine work. Thanks!

  4. Brian,

    This is exactly what I was looking for as I recently purchased a new MacBook and did not want to install Chrome. I hadn’t used Fluid in some time and had to search for my license, but once I followed your process I had Hangouts in my menu bar. I also configured system preference to load the app automatically at logon and then add a keyboard combo to reveal from the menu bar.

    Referencing Tom’s question about notifications. I was not able to configure a visual notification, but I do receive audio cues.

    Again, thanks for the great tutorial and for taking time to work out the CSS.

    Steven Combs
    http://www.stevencombs.com

  5. Tom Olmsted says:

    Brian,

    I, too, thought the new Hangouts page would fit nicely into a Fluid app; however, I receive a prompt to download a “current” browser after I integrate it into Fluid. Did you experience this when you set yours up?

    • Brian Reiter says:

      No. But I have changed the default User Agent to Safari 8. Menu > Fluid App Name > User Agent > Other…

      Paste in this string:

      Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) Version/8.0.8 Safari/600.8.9

      • Sam Jolley says:

        Changing the User Agent to “Safari 8 – Mac” worked for me! : ) Thanks for a great article by the way!

  6. Matthew Robinson says:

    Hey Brian,

    A note for those in El Capitan and/or Safari version 9.0.2 like I am.
    User Agent ‘Safari 8 – Mac’ and the string you posted for ‘Other’ will not work.

    All that needs to be done is changing the part with [Version/8.0.8 Safari/600.8.9] to the user’s current version.. –> Version/9.0.2 Safari/600.9.0

    Paste in this string:

    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) Version/9.0.2 Safari/600.9.0

  7. Paul Newman says:

    Hi Matthew, I am still getting the same error even after I paste the string in. Mac OS Version is 10.11 Beta (15A278b), Safari version is Version 9.0 (11601.1.56). Can you help me out with thsi please. Thanks Paul

    • Matthew Robinson says:

      Hey Paul,

      Have you tried entering my string of text?

      Matt

      • I’m running OSX 10.11.5 beta with Fluid 1.8.5 and confirm the same issue. The following User Agent string (copied from Safari) does not work

        Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/601.6.17 (KHTML, like Gecko) Version/9.1.1 Safari/601.6.17

  8. Brad Warner says:

    Does anyone have a user script to get a Fluid app with hangouts.google.com to display OS X notifications and app badges?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: