I am trying to Show a RSS feed in a Google Chrome extension's popup page. I am using jQuery and a RSS plugin for jQuery. The code works perfectly if I load the popup.html in a browser window. However, when I open the popup from extension the RSS is not populated into the target div.
Source: popup.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.rss.min.js"></script>
    <script src="js/mypopup.js"></script>
</head>
<body>
    <div id="header">
        <a href="someurl" target="_blank">
          <img id="logo" src="images/header.png" />
        </a>
    </div>
    <div id="feed-container">
        <div id="feed"></div>
    </div>
</body>
</html>
Source: mypopup.js
document.addEventListener('DOMContentLoaded', function () {
//document.getElementById('feed').innerHTML = '<p>Test</p>';
$("#feed").rss("http://feed/url");
});
Source: manifest.json
{
  // Required
  "name": "XYZ",
  "version": "0.1",
  "manifest_version": 2,
  // Recommended
  "description": "XYZ",
  "icons": {
  "128": "images/icon128.png"
  },
  // Add any of these that you need
  "homepage_url": "http://url",
  //"key": "publicKey",
  //Browser Action
   "browser_action": {
      "default_icon": {                    // optional
      "19": "images/icon19.png",           // optional
      "38": "images/icon38.png"            // optional
      },
      "default_title": "XYZ",
      "default_popup": "popup.html"
   }
}
So, what am I doing wrong here?