2013-10-15 115 views
0

我想创建一个扩展来显示从我的饲料中使用谷歌饲料API获取的所有最新帖子。为了实现这一点,我在background.js添加以下代码:cross rider扩展使用谷歌饲料api从饲料中获取新帖子

appAPI.ready(function() { 
// Global variable to hold the toggle state of the button 
var buttonState = true; 

// Sets the initial browser icon 
appAPI.browserAction.setResourceIcon('images/icon.png'); 
// Sets the tooltip for the button 
appAPI.browserAction.setTitle('My Postreader Extension'); 
appAPI.browserAction.setPopup({ 
    resourcePath:'html/popup.html', 
    height: 300, 
    width: 300 
});}); 

popup.html

<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<script type="text/javascript"> 
function crossriderMain($) {eval(appAPI.resources.get('script.js')); }</script> 
</head> 
<body><div id="feed"></div></body></html> 

的script.js文件是─

google.load("feeds", "1"); 

function initialize() { 
    var feed = new google.feeds.Feed("http://www.xxxxx.com/feed/"); 
    feed.setNumEntries(10); 
    feed.load(function(result) { 
    if (!result.error) { 
     var container = document.getElementById("feed"); 
     for (var i = 0; i < result.feed.entries.length; i++) { 
     var entry = result.feed.entries[i]; 
     var div = document.createElement("div"); 
     var link = document.createElement('a'); 
     link.setAttribute('href', entry.link); 
     link.setAttribute('name', 'myanchor'); 
     div.appendChild(document.createTextNode(entry.title)); 
     div.appendChild(document.createElement('br')); 
     div.appendChild(link); 
     div.appendChild(document.createElement('br')); 
     container.appendChild(div); 
     } 
    } 
    }); 
} 
google.setOnLoadCallback(initialize); 

但我无法得到所需的结果。弹出窗口不显示任何内容。它只是保持空白。

+0

background.js代码和popup.html代码看起来一般,但似乎从script.js文件,“谷歌”对象没有定义?你是否在另一个脚本中加载它?是否有意在popup.html头文件中为google feed API提供另一个SCRIPT标签?另外,你是否看到任何错误[控制台中的消息](http://docs.crossrider.com/#!/guide/howto_console_log)? [免责声明:我是一名Crossrider员工] – Shlomo

+0

在控制台中没有收到任何错误消息 – rammurtee

+0

是的,应该有另一个脚本标记来在google.html中喂养api。谢谢,让我试试 – rammurtee

回答

0

由于您使用了弹出窗口的内容的资源文件,这是最好的加载从crossriderMain功能远程脚本,如下所示:

<!DOCTYPE html> 
<html> 
<head> 
<!-- This meta tag is relevant only for IE --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<script type="text/javascript"> 
function crossriderMain($) { 
    appAPI.db.async.get('style-css', function(rules) { 
    $('<style type="text/css">').text(rules).appendTo('head'); 
    }); 

    appAPI.request.get({ 
    url: 'http://www.google.com/jsapi', 
    onSuccess: function(code) { 
     $.globalEval(code); 
     appAPI.db.async.get('script-js', function(code) { 
     // runs in the context of the extension 
     $.globalEval(code.replace('CONTEXT','EXTN')); 

     // Alternatively, run in context of page DOM 
     $('<script type="text/javascript">').html(code.replace('CONTEXT','PAGE DOM')).appendTo('head'); 
     }); 
    } 
    }); 
} 
</script> 
</head> 
<body> 
<h1>Hello World</h1> 
<div id="feed"></div> 
</body> 
</html> 

[免责声明:我是一个Crossrider员工]