從Chrome擴展程序訪問API

Question

我有一個網站，我在Google Chrome中添加了一個擴展。我需要的是我必須從擴展中訪問服務器文件。我需要的是，無論服務器文件輸出，我需要訪問擴展中的輸出。 這裏是我的manifest.json：

{ 
    "name": "Calpine Extension", 
    "version": "1.0", 
    "description": "Log on to calpinemate", 
    "manifest_version": 2, 
    "browser_action": { 
     "default_icon": "icon_128.png" 
    }, 
    "background": { 
     "persistent": false, 
     "scripts": ["background.js"] 
    }, 

    "browser_action": { 
     "default_title": "Test Extension", 
     "default_icon": "calpine_not_logged_in.png" 
    }, 

    "externally_connectable": { 
     "matches": ["http://calpinemate.com/"] 
    } 
} 

這裏是我的background.js

chrome.browserAction.onClicked.addListener(function (tab) { 
    chrome.tabs.create({ "url": "http://calpinemate.com" }); 
}); 

現在我需要的是，我有一個輸出1。現在什麼是服務器文件（的index.php）我需要的是我想要擴展這個1。這就是我想要的擴展輸出文件的輸出。我怎樣才能做到這一點？ 這裏是我的index.php

<?php echo 1 ;?> 

我試圖this.But還是它只是工作的onclick event.Please檢查我的代碼。 這是我background.js訪問您的服務器

function getGmailUrl() { 
    return "http://calpinemate.com/"; 
    } 
    function isGmailUrl(url) { 

     return url.indexOf(getGmailUrl()) == 0; 
     } 
    chrome.browserAction.onClicked.addListener(gotopage); 

     function gotopage(){  
     chrome.tabs.query({ 
     url: "http://calpinemate.com/*", 
     currentWindow: true 
    }, function(tabs) { 
    if (tabs.length > 0) { 
     var tab = tabs[0]; 
     console.log("Found (at least one) Gmail tab: " + tab.url); 
     console.log("Focusing and refreshing count..."); 
     chrome.tabs.update(tab.id, { active: true }); 
     updateIcon(); 
    } else { 
     console.log("Could not find Gmail tab. Creating one..."); 
     chrome.tabs.create({ url: getGmailUrl() }); 
     updateIcon(); 
    } 
     }); 
    } 

     if (chrome.runtime && chrome.runtime.onStartup) { 
     chrome.runtime.onStartup.addListener(function() { 

     updateIcon(); 
     }); 
     } else { 
     chrome.windows.onCreated.addListener(function() { 

     updateIcon(); 
      }); 
     } 
    function updateIcon(){ 

    var req = new XMLHttpRequest(); 
    req.addEventListener("readystatechange", function() { 
     if (req.readyState == 4) { 
    if (req.status == 200) { 
     localStorage.item=req.responseText; 
     //alert(localStorage.item); 
     if(localStorage.item==1){ 
      chrome.browserAction.setIcon({path:"calpine_logged_in.png"}); 
      chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]}); 
      chrome.browserAction.setBadgeText({text:""}); 
     } 
     else{ 
     chrome.browserAction.setIcon({path:"calpine_not_logged_in.png"}); 
     chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]}); 
     chrome.browserAction.setBadgeText({text:""}); 
     } 
     // We received the data 
     //alert("Data: " + req.responseText); 
     } else { 
     // Handle the error 
     alert("ERROR: status code " + req.status); 
     } 
    } 
    }); 
     req.open("GET", "http://blog.calpinetech.com/test/index.php", true); 
     req.send(null); 

}

Answer 1

首先請求允許：

// In manifest.json 
... 
permissions: [ 
    ... 
    "*://calpinemate.com/index.php" 
], 

然後使用AJAX來訪問數據：

var req = new XMLHttpRequest(); 
req.addEventListener("readystatechange", function() { 
    if (req.readyState == 4) { 
     if (req.status == 200) { 
      // We received the data 
      alert("Data: " + req.responseText); 
     } else { 
      // Handle the error 
      alert("ERROR: status code " + req.status); 
     } 
    } 
}); 
req.open("GET", "https://calpinemate.com/index.php", true); 
req.send(null);