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