ChromeExtension(BrowerAction)で、AjaxでJSONをやりとりする簡単なサンプル

概要

• BrowserActionのアイコンをクリックすると、Ajaxでサーバ(PHP)と通信する。
• サーバから数値がJSONで返答され、その結果をBrowserActionのボタンに表示する
• ポップアップ画面は表示しない

クリックすると、サーバから数値がJSONで返答され、ボタンに表示される↓

コード

manifest.json

{
    "name": "Ajax Sample",
    "version": "0.1",
    "manifest_version": 2,
    "description": "Ajax Sample",
    "permissions": ["http://sample.info/*"], 
    "browser_action": {
        "default_title": "Ajax Sample"
    },
    "background": {
    "scripts": ["background.js"]
    }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            chrome.browserAction.setBadgeText({text:""+JSON.parse(xhr.responseText).num});
        }
    }
    var url = 'http://sample.info/ajax.php';
    xhr.open('GET', url, true);
    xhr.send();
});

ajax.php

<?php

echo json_encode(array('num' => 1));