0

我正在尝试根据 lifehacker (http://lifehacker.com/5857721/how-to-build-a-chrome-extension) 的示例做一个 RSS 阅读器 chrome 扩展。在此基础上我做了我自己的。它没有用。我尝试了他们的源代码，它工作得非常好（对于 lifehacker），但是当我将 xml 源更改为http://www.engadget.com/rss.xml时，它只显示一个空方块。如果有人能指出任何错误或错误，我真的很感激。我的文件是：

清单.json

  {
  "name": "RSS Fetcher",
  "version": "0.1",

  "description": "engadget rss reader.",
  "homepage_url": "http://www.engadget.com/",
    "background_page": "background.html",
    "permissions": [
      "<all_urls>",
      "http://www.engadget.com/*"


],
    "browser_action": {
    "default_title": "engadget reader",      
    "default_popup": "popup.html"       
  }
}

背景.html

    <html>
<head>
    <script src='scripts/jquery-1.6.1.min.js'></script>
    <script src="scripts/parse.js"></script>
    <script>


        function fetch_feed(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(data) {
              if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                  var data = xhr.responseText;
                  callback(data);
                } else {
                  callback(null);
                }
              }
            }
            // Note that any URL fetched here must be matched by a permission in
            // the manifest.json file!
            xhr.open('GET', url, true);
            xhr.send();
        }   


        function onRequest(request, sender, callback) {
            if (request.action == 'fetch_feed') {
              fetch_feed(request.url, callback);
            }
        }

        // Wire up the listener.
        chrome.extension.onRequest.addListener(onRequest);      


    </script>
</head>
<body>
</body>
</html>

popup.html

<html>
<head>
    <script src='scripts/jquery-1.6.1.min.js'></script>
    <script src="scripts/parse.js"></script>
    <script>

        function fetch_feed() {
            chrome.extension.sendRequest({'action' : 'fetch_feed', 'url' : 'http://www.engadget.com/rss.xml'}, 
                function(response) {
                    display_stories(response);
                }
            );
        }

        function display_stories(feed_data) {
            var xml_doc = $.parseXML(feed_data);
            $xml = $(xml_doc);
            var items = $xml.find("item");
            $('#popup').html('<img src="images/logo.png" id="logo" onclick="open_item(\'http://engadget.com/\'); window.close();" /><br clear="all" />');
            items.each(function(index, element) {
                var post = parse_post(element);
                var item = '';
                var class2 = '';
                if (index >= localStorage['unread_count']) {
                    // // console.log('visited');
                    item += '<div class="post read">';
                }
                else {
                    item += '<div class="post">'
                }
                item += '<span class="tag">' + post.tag + '</span>\
                            <a href="' + post.url + '">\
                                <div id="' + post.id + '" class="item" onclick="open_item(\'' + post.url + '\');">\
                                    <img src="' + post.img + '" width="107" height="60" />\
                                    <h4>' + post.title + '</h4>\
                                    <span class="description">' + post.description + '...</span>\
                                </div>\
                            </a>';
                item += '</div>';
                $('#popup').append(item);
            });
        }

    </script>
    <link rel="stylesheet" href="styles/post.css" type="text/css" />
</head>
<body>

    <div id="popup">

    </div>
    <script>
        $(document).ready(function() {
            fetch_feed();
        });
    </script>
</body>
</html>

解析.js

function parse_post(element) {
    // console.log(element);
    var post = new Object();
    post.title = $(element).find("title").text();
    post.tag = post.title.split('[')[1].split(']')[0];
    post.title = post.title.split('[')[0];
    post.id = $(element).find("guid").text();
    post.url = $(element).find('link').text();
    post.description = $("<div/>").html($(element).find("description")).text();
    post.img = $('img', post.description)[0].src; //107x60px
    var shorten = 120;
    if (post.title.length > 80) {
        shorten = 70;
    }
    post.description = $.trim($(post.description).text());
    post.description = post.description.substr(0, shorten);
    // console.log(post);
    return post;
}

function open_item(url) {
    chrome.tabs.create({url: url});
    chrome.browserAction.setBadgeText({text:''});
}

我还使用了 jquery-1.6.1.min.js 有什么帮助:) 提前致谢！

4

1 回答 1

0

不确定“all_urls”在您的 manifest.json 中是否有效，请将其删除并试一试

于 2012-04-23T23:44:30.137 回答