3-1. Chrome Extensions

詳しくは: Chrome Extensions API リファレンス

ポイントは以下3点

1. カスタムHTMLによるデスクトップ通知
2. 通知クリックをWebSite側へ伝播し、該当タスクをハイライト
3. Get the Chrome Extensionsといった案内の削除

カスタムHTMLによるデスクトップ通知

基本的にテキストか、固定HTMLしかデスクトップ通知に指定できない。しかし、固定HTML内にscriptを仕込むことは出来るので、onloadでDOMを変更し、カスタムHTMLによるデスクトップ通知を実現する。

<script>
$(document).ready(function() {
    var bg = chrome.extension.getBackgroundPage();
    bg.app.data.notifyWindow = window;
    bg.app.dom.setup(document.body);
});
</script>

chrome.extension.getBackgroundPage() によってbackground.htmlのappを取り出し、通知HTMLのwindowやdocument.bodyをセットしメソッドを呼び出している。

通知クリックをWebSite側へ伝播

content_scriptsでカスタムイベントを生成し、イベント内容はJSONでシリアライズして渡す。

// click時に叩くコード
chrome.tabs.sendRequest(tab.id, {
    event: 'clickNotification',
    option: {
        list_id: list_id,
        task_id: task_id
    }
});

// content_scripts
chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        var customEvent = document.createEvent('Event');
        customEvent.initEvent('extentionsEvent', true, true);
        var eventDiv = document.getElementById('receiver');
        eventDiv.innerText = JSON.stringify(request);
        eventDiv.dispatchEvent(customEvent);
    }
);

// site
<div id="receiver" data-setup="receiver"></div>
app.setup.receiver = function(ele){
    ele.get(0).addEventListener('extentionsEvent', function() {
        var data = JSON.parse(ele.text());
        app.fireEvent(data.event, data.option);
    }, false);
}

Get the Chrome Extensionsといった案内の削除

既に拡張をインストールしている場合、拡張機能インストールの案内は不要ですので、content_scriptsで消します。

var getTheExtensions = document.getElementById('get-the-extensions');
if (getTheExtensions) {
    getTheExtensions.parentNode.removeChild(getTheExtensions);
}