Chrome拡張のサンプル(toast的な表示)

拡張アイコンのボタンが押されたときに、何か処理をして処理結果やメッセージなどを表示したいときのサンプル。alertだけじゃ味気ないのでtoast風に。

manifest.json{
  "manifest_version": 2,
  "name": "Toast",
  "version": "0.0.1",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at" : "document_end"
  }],
  "browser_action": {
    "default_title": "toast"
  }
}

background.jschrome.browserAction.onClicked.addListener(function (tab) {
        // 何かの処理を行う
	chrome.tabs.sendMessage(tab.id, {cmd: 'toast', msg: '終了しました'});
});

content.jsvar toast = document.createElement('div');
toast.style.zIndex = '999';
toast.style.visibility = 'hidden';
toast.style.position = 'fixed';
toast.style.left = '50%';
toast.style.top = '50%';
toast.style.backgroundColor = '#888888';
toast.style.color = '#ffffff';
toast.style.padding = '10px';
toast.style.fontWeight = 'bolder';
document.body.insertBefore(toast, document.body.firstChild);

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.cmd === 'toast') {
        toast.innerHTML = request.msg;
        toast.style.visibility = 'visible';
        setTimeout(function() {
            toast.style.visibility = 'hidden';
        }, 1000);
    }
});