はじめに

GCM(Google Cloud Messaging)とChrome extensionを使って簡単なデスクトップ通知をプッシュする仕組みを作ってみる

下準備

Google API ConsoleにGoogleアカウントでログイン
新しいプロジェクトを作る
該当プロジェクトのトップページに記載されているプロジェクト番号をどこかに控えておく
APIと認証→APIをたどり、Google Cloud Messaging for AndroidとGoogle Cloud Messaging for Chromeと有効化（一応、どっちも有効化しました）
APIと認証→認証情報でサーバーアプリケーションのキー欄を確認
プッシュ通知を行うサーバのIPなどで制限をかけるなどの確認をして、最後にAPIキーを控えておく

Chrome拡張の準備

ブラウザの右上にアイコンを出して簡単なUIを出したりということもできるけど、ここでは単純にChromeの持つデスクトップ通知機能を使ってピョコッと右下に出して終わりにしておく
jqueryはあれば何かと便利なのでDLして、minifyしたやつをjquery.min.jsという名前でこれらのファイルと同じディレクトリに置いてください
icon.pngは128×128の適当なpngファイルを用意しといてくださいまし

manifest.json

{
    "manifest_version": 2,
    "name": "デスクトップ通知",
    "version": "0.1",
    "description": "デスクトップ通知",
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
    },

    "background" : {
        "scripts": [
            "jquery.min.js",
            "background.js"
        ],
        "persistent": true
    },

    "permissions": [
        "gcm", "notifications"
    ]
}

background.js

var onstartup = function(){
    //  CGM登録
    if(!window.localStorage.getItem('registrationId')){
        chrome.gcm.register(['プロジェクト番号'], function(registrationId){
            $.ajax({
                type: 'POST',
                url : 'サーバアプリのURL',
                data: {
                    registrationId: registrationId
                }
            }).done(function(data){
                window.localStorage.setItem('registrationId', registrationId);
            }).fail(function(xhr){
                alert('登録に失敗しました');
            }).always(function(){
            });
        });
    }
}

chrome.runtime.onInstalled.addListener(onstartup);
chrome.runtime.onStartup.addListener(onstartup);

chrome.gcm.onMessage.addListener(function(message){
    chrome.notifications.create('', {
        title: message.data.title,
        message: message.data.message,
        type:'basic',
        iconUrl: 'icon.png'
    }, function(id){
    });
});

サーバアプリの準備

上のextensionの例だと、自分のregistrationIdをサーバに送信します
サーバは通知先を指定するのにこのregistrationIdというものが必須なので、サーバ側のアプリはこのIDをDBあたりに保存しておいてください
この辺の実装は色々あるので割愛

サーバアプリからGCMサーバへプッシュ送信を依頼するには、node.jsの場合

gcm.js

var request = require('request');
request.post({
    url     : 'https://android.googleapis.com/gcm/send',
    headers : {
        Authorization:'key=控えておいたAPIキー'
    },
    json    : true,
    body    : {
        data: {
            title: 'はろー',
            message: 'わーるど'
        },
        registration_ids: ['送信先', 'registration_Idの', 'リスト']
    },
    encoding: 'utf-8'
}, function(err, response, body){
    console.log(body);
});

みたいな形で、https://android.googleapis.com/gcm/send にAPIキーをしのばせたheaderをしこんだ上で、content-type: application/jsonと宣言して、JSONデータをリクエストボディにそのまま突っ込んでPOSTする
同じ動作するならサーバ側の言語は問わないし、ライブラリがあるならおそらくそれを使ったほうが簡単

デバッグ

ここの例のextensionはlocalStorageにregistrationIdを保存しておいて何回もregister()を呼び出すのを抑制しているものの、registrationIdはextensionとGoogleアカウントの組み合わせでほぼ固定っぽいので、サーバ側のロジックのデバッグにテストの配信先が必要な場合はextension側で一度chrome.gcm.register()のコールバック関数で取れるregistrationIdをどこか（console.logとか）に出力して控えておいて、サーバ側からそのregistrationIdだけに向けてPOSTする部分だけ作ってテストしてた

最後

ここのコードについては、実際に作ったものから業務に関係しそうなところを削除したものなので、完全な動作については無保証です
割とよく使われていたっぽいのに、deprecatedになっているAPIなどもあるので(前はHTMLからNotificationのコンテンツを作れるとかもできたらしい）、本家のGoogleのドキュメントを参考にしながらやると捗ります

GCM(Google Cloud Messaging)とChrome extensionでデスクトップへプッシュする仕組みを作る

はじめに

下準備

Chrome拡張の準備

サーバアプリの準備

デバッグ

最後