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?