Create a convenient viewer for vk.com using Fluid.app with notification of new messages in the dock Mac OS X

Hello!

One day after reading one article , I was eager to make such a wrapper for contacting preference and courtesans, especially since with adequate applications for Mac from Durov's team, things are very tight, and with this approach you can get an almost complete desktop application.


')
And what came out of it - under the cut.

First of all, downloading the free version from the official site , I wanted to understand what is being proposed and how it can work with notifications, especially since the site in the section for developers flashed the cherished API abbreviation. However, immediately after installation and first acquaintance with the program, a slight disappointment awaited - the free version does not want to work with notifications, and this functionality is only available in the full version for $ 4.99 along with a couple of other very interesting features, such as: connecting your own js and css, as well as the opportunity to fix our application in the status bar. I will not describe the use of the program in detail, because the site has made more than an available video for this.

Interest nevertheless took its toll, and five green American presidents for the experiments turned out to be not at all a pity. And just after the purchase (the activation is done with an xml-like .fluidlicense file, which is automatically sent to the email from support@fluidapp.com), the most interesting begins.

The fact is that the bundled notifications are pre-configured only for facebook, gmail and Google Reader (hee-hee), and they are nothing more than a regular javascript code hidden in the program's Userscripts settings:

On the one hand, this is a disappointment, but on the other, the open space for creativity.

As can be seen from the settings window, you can specify not only the script itself, but also the mask of the address to which it will apply. For example, the string *facebook.com* will cover all subdomains and pages where facebook.com is found.
From the given example code for facebook, it is clear that there is no talk of API work directly, the script just parses the page, and draws the necessary part of it, passing it as a value for the application's badge in the dock using window.fluid.dockBadge .

Thanks to existing examples for Facebook, all we have to do is use this model for contact.
So, we add a new user script, called for example VK, and the mask *vk.com* (you can do it for other addresses, including vkontakte.ru, but personally I go only by a short name, and so this makes no sense).

Having slightly edited the script, I decided to also add a sound for each new unread message using the window.fluid.playSound("Glass") method from the Fluid API.

Here is the complete code for the resulting script with comments:

 window.fluid.dockBadge = ''; //  ,            setTimeout(updateDockBadge, 500); //       setInterval(updateDockBadge, 1000); //    function updateDockBadge() { var msgCounter = document.querySelector( "#l_msg>a>span>span>span" ); //    DOM-         var val = +msgCounter.innerHTML; //   HTML     ,    val if(isNaN(val)) { } else { newBadge = val; } //      ,     --   ,    --     val if(val > window.fluid.dockBadge) {window.fluid.playSound("Glass");} //    ,   ,   var newBadge; //       window.fluid.dockBadge = newBadge; //     API     } 

The only small “pichalka” is that the number of messages is shown only if the program is in icon mode in the dock, and when it is minimized to the status bar, the ability to display quantitative indicators there by regular means is no longer there.

In fact, we completed the main task, however, a small, still slightly annoying item in the form of advertising remained, which we can also simply get rid of using Userstyles, creating a new style with the same mask for the URL and inserting a tiny CSS code:

 #left_ads {display:none} 

Everything. Thanks to these simple manipulations, we got quite a convenient application for using the contact from under Mac OS X without clogging the Safari tabs and receiving an audio notification with the display of the number of unread messages.

I hope the article will be useful to someone, and despite the fact that it considers an example only for vk.com, this approach can be applied to a huge number of any other sites convenient to you. What is the most valuable, we did not use so disliked by many Vkontakte APIs at all and cost just a few lines of code.