title: chrome extension loading external js
body: <p>I am building one chrome extension which uses a JavaScript library customized to a specific web domain.  It is a restriction of that library to be called only from that specific domain (license issues actually).</p>
  
  <p>I want to load that js library into my chrome extension, but the extension gives a Content Security Policy error as the library to be used comes from a HTTP (not HTTPS) URL. I searched StackOverflow for this and the only options I see are either to load that file locally or through message passing.</p>
  
  <p>Can someone please tell what code should I have in my <code>background.js</code> and <code>content.js</code> and what permission to add in my <code>manifest.json</code>?</p>
  
  <p>The website to get that js library is, e.g., <code>http://library.com/js/xy.js</code>. 
  I know there should be something else like some piece of code in content.js.  How can I load the code from that domain?</p>
  
  <p>manifest.json:</p>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "abc",
      "version": "0.2",
      "description": "abc",
      "content_security_policy": "script-src 'self'; object-src 'self'",
      "browser_action": {
          "default_icon": "MM_logo_2009.png",
          "default_popup": "tab/popup.html"
      },
      "background": {
          "scripts": ["event.js"],
          "persistent": false
      },
      "permissions": [
          "http://library.com/js/xy.js",
          "bookmarks",
          "tabs",
          "storage",
          "http://*/*", 
          "https://*/*"
      ]
  }
  </code></pre>
  
  <p>event.js:</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://library.com/js/xy.js", true);
  xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
          // innerText does not let the attacker inject HTML elements.
          document.getElementById("resp").innerText = xhr.responseText;
      }
  }
  xhr.send();
  </code></pre>