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

Almost a duplicate: [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) (or actually a duplicate -- the solution there solves your issue) — apsillers, Sep 17 '14 at 13:03
@apsillers is right. In addition, your code cannot work because external scripts cannot be loaded in a Chrome extension. See [CSP](https://developer.chrome.com/extensions/contentSecurityPolicy). — Rob W, Sep 17 '14 at 18:23

score 0 · Answer 1 · answered Jan 03 '15 at 00:14

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 evals, and to verify that your message is genuine through some means, such as the origin or callback properties.