Google Cloud Messaging for Chrome Tutorial

Using Google Cloud Messaging for Chrome API, you can send push messages to all the chrome browsers using your
extension.
Google provided Cloud Messaging (GCM) API for Chrome for free with a daily limit of  10,000 requests/day.

 

Above image explains how the push messaging works.

1) Chrome extension gets a Channel ID from Chrome Run-time
2) After receiving Channel ID, your extension sends the channel ID to your web server.
3) Using GCM API, you can send a message to chrome browser which will queued in GCM Server.
4) GCM server sends your message to Chrome Run-time.
5) Chrome Run-time forwards the message to your extension.

To see the functionality install this extension: Install Extension

After extension is installed, Go to webpage Install Extension and Click on “Launch App”. Once the app is launched, you will see a dialog window with Channel ID.

 

Now you can send push message to chrome by accessing the link: Send Push Message
Serve scripts for getting Refresh Token : Server Scripts.

Client Side : How to use Google Cloud Messaging for Chrome API

1) Download the extension source code and unzip it. 

 

2) manifest.json contains

"permissions": [
"pushMessaging",
"notifications"
]

“pushMessaging” is for receiving push messages, “notifications” is showing desktop notifications to user.

3) Open background.js in editor.  You can see the following code

// This function gets called when the extension is launched.
chrome.app.runtime.onLaunched.addListener(function(launchData) {

  	chrome.pushMessaging.getChannelId(true, channelIdCallback);
});

//This is called when the extension is installed.
chrome.runtime.onInstalled.addListener(function() 
{
	console.log("Push Messaging Sample Client installed!");

	chrome.pushMessaging.getChannelId(true, channelIdCallback);
});

//After Receiving  Channel ID, listen for Push Messages
function channelIdCallback(message) {
  	console.log("Background Channel ID callback seen, channel Id is " + message.channelId);

	  ListenForMessages();

         //Show channel Id to user
	 chrome.app.window.create("PushHome.html?channelId="+message.channelId);

}

function ListenForMessages() 
{
  console.log("Listening for messages");

  //Start listening for Push Messages.
  chrome.pushMessaging.onMessage.addListener(messageReceived);

}

//This function is invoked when push message is received.
function messageReceived(message) {

   var notification = window.webkitNotifications.createNotification(
      'icon.jpg', 'Push Message',
       message.payload +" [" + message.subchannelId + "]");

 	 notification.show();

     //Show it to user. 
    notification.show();

}

chrome.pushMessaging.getChannelId API is for getting Channel ID.
chrome.pushMessaging.onMessage.addListener API is for listening to Push Messages.

4) To test Local extension , Open Chrome Browser and Go to chrome://extensions/. Uninstall app “Push Message to Chrome Sample” if you installed it already.
Click on “Load unpacked extension” and browse the unzipped extension folder. After the location extension is installed, you can see channel ID in the Dialog. Now extension is ready for getting Push messages.

Server Side : How to use Google Cloud Messaging for Chrome API

To send a push message from  web-server, you need to provide OAuth Access token in the request

POST /gcm_for_chrome/v1/messages
Host: www.googleapis.com
Content-Type: application/json
Authorization: Bearer 1/fFBGRNJru1FQd44AzqT3Zg

{
'channelId': '07160769806968142454/felgdniiefdhlmhddlofhfiblflkhlcf',
'subchannelId': '0',
'payload': 'GCM for Chrome Works!'
}

 

Below is the PHP Code  for sending Push message:

$access_token='XXXXXXXXXXXXXX';

$url ="https://www.googleapis.com/gcm_for_chrome/v1/messages";

$data = json_encode(array(
        'channelId' => "07160769806968142454/felgdniiefdhlmhddlofhfiblflkhlcf",
        'subchannelId' => "1",
        'payload'=> "GCM for Chrome Works"
    ));

    $ch = curl_init();
    $curlConfig = array(
        CURLOPT_URL            => "https://www.googleapis.com/gcm_for_chrome/v1/messages",
        CURLOPT_POST           => true,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POSTFIELDS     => $data,
        CURLOPT_SSL_VERIFYPEER => false,
        CURLOPT_HTTPHEADER     => array(
            'Authorization: Bearer ' . $access_token,
            'Content-Type: application/json'
        )
    );
    curl_setopt_array($ch, $curlConfig);
    $result = curl_exec($ch);
	if(strstr($result,"error"))
	{
		echo "ERROR:".$result;
	}
	else
		echo "Successfully sent message to Chrome";

Reference: Chrome Developers