Question

我正在尝试创建一个扩展程序，以使用google feeds api显示从我的Feed中提取的所有最新帖子。为实现这一点，我在background.js中添加了这段代码：

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

但是我无法得到理想的结果。弹出窗口没有显示任何内容。它只是保持空白。

Answer 1

由于您正在为弹出窗口的内容使用资源文件，因此最好从 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员工]

跨骑手延伸，使用google feeds api从Feed中获取新帖子

1 个答案: