chrome extension javascript not working
Question
Hello I am developing with chrome extension, i am working with ebay search api... Following is my html code:
<html>
<head>
<title>eBay Search Results</title>
<style type="text/css">body { font-family: arial,sans-serif;} </style>
<script type="text/javascript" src="j.js"></script>
</head>
<body>
<h1>eBay Search Results</h1>
<div id="results"></div>
</body>
</html>
javascript
function _cb_findItemsByKeywords(root) {
var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
for (var i = 0; i < items.length; ++i) {
var item = items[i];
var title = item.title;
var pic = item.galleryURL;
var viewitem = item.viewItemURL;
if (null != title && null != viewitem) {
html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
'<td><a href="' + viewitem + '" target="_blank">' + title + '</a></td></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("results").innerHTML = html.join("");
} // End _cb_findItemsByKeywords() function
var url = "http://svcs.ebay.com/services/search/FindingService/v1";
url += "?OPERATION-NAME=findItemsByKeywords";
url += "&SERVICE-VERSION=1.0.0";
url += "&SECURITY-APPNAME=myappid";
url += "&GLOBAL-ID=EBAY-US";
url += "&RESPONSE-DATA-FORMAT=JSON";
url += "&callback=_cb_findItemsByKeywords";
url += "&REST-PAYLOAD";
url += "&keywords=harry%20potter";
url += "&paginationInput.entriesPerPage=3";
// Submit the request
s=document.createElement('script'); // create script element
s.src= url;
debugger;
document.body.appendChild(s);
Following is manifest.json file
{
"manifest_version": 2,
"name": "eBay",
"description": "This extension demonstrates a 'browser action' with ebay products.",
"version": "1.0",
"browser_action": {
"default_icon": "ebayicon.png",
"default_popup": "MySample.html"
}
It gives my just <h1> tag as output.... and following is an error that occurs:
**Uncaught TypeError: Cannot read property 'appendChild' of null **
I dont understand what exactly is it saying... Please help me understand above error.
Thank you
1 answers
solution1
0 2015-01-03 00:14:43
The Issue:
The issue with your code is that Google Chrome extensions cannot load external scripts. As shown in the Content Security Policy , Chrome restricts what scripts extensions can load for security reasons (eg. preventing man-in-the-middle attacks). This is the code that is causing your issue, since you're trying to load a script from Ebay, which is not allowed since it is an external script:
var url = "http://svcs.ebay.com/services/search/FindingService/v1";
url += "?OPERATION-NAME=findItemsByKeywords";
url += "&SERVICE-VERSION=1.0.0";
url += "&SECURITY-APPNAME=myappid";
url += "&GLOBAL-ID=EBAY-US";
url += "&RESPONSE-DATA-FORMAT=JSON";
url += "&callback=_cb_findItemsByKeywords";
url += "&REST-PAYLOAD";
url += "&keywords=harry%20potter";
url += "&paginationInput.entriesPerPage=3";
// Submit the request
s=document.createElement('script'); // create script element
s.src= url;
The Solution:
Step #1
Change the url to use the "https://" protocol. Simply replace the first line of the incorrect code with
var url = "http://svcs.ebay.com/services/search/FindingService/v1";
Step #2
In your manifest.json , change/add the content_security_policy line to match the following
"content_security_policy": "script-src 'self' https://svcs.ebay.com; object-src 'self'"
Additional Concerns
That should have resolved the issue with the Chrome Extension CSP.
You also have an issue in your manifest.json , where the brackets are not closed. Just insert an additional } after the browser_action segment, and before the end of the file.
In order for your script to be able to access the page, you will need to register the script under content_scripts in your manifest.json . This will allow the script to interact with the document element of the page, but will run your script in an isolated environment, meaning interaction with the global JavaScript of the page itself and your extension is limited.
If you need to interact with the global JavaScript environment of the page itself, a script will have to be injected with the <script> tag in the document element of the page you wish to interact with. Message passing can be done through either short-lived or long-lived requests, which you can explore in the Google Developer documentation on messaging . Just make sure not to use unsafe eval s, and to verify that your message is genuine through some means, such as the origin or callback properties.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.