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));
    

    좋은 웹페이지 즐겨찾기