title: jQuery only working in certain areas of Chrome App
body: <p>I am trying to create a simple serial port reader for Chrome. Nothing major, just receive the input so I can parse it. I am having some problems where jQuery is working at one point but then two lines down it is "$ undefined".</p>
  
  <p>Manifest:</p>
  
  <pre>
  {
      "name": "Serial Reader",
      "description": "Read Serial barcode scanners with Google Chrome.",
      "version": "0.1",
      "manifest_version": 2,
      "app": {
          "background": {
              "scripts": ["background.js", "script.js", "jquery.js"],
              "transient": true
          }
      },
      "permissions": [
          "serial"
      ],
      "icons": { "16": "icon-16.png", "128": "icon-128.png" }
  }
  </pre>
  
  <p>Script.js:</p>
  
  <pre>
  
      var onGetDevices = function(ports) {
        for (var i=0; iNo ports were found.");
          } else {
              //Works
              $("#portList").append("" + ports[i].path + "");
          }
        }
      };
      chrome.serial.getDevices(onGetDevices);
  
      var connectionId = -1;
      var portSelected = $("#portList").val(); //Returns undefined $
  
      var connectCallback = function() { console.log("Connected") };
  
      chrome.serial.connect(portSelected, null , connectCallback);
  
      var stringReceived = '';
  
      var onReceiveCallback = function(info) {
          if (info.connectionId == expectedConnectionId && info.data) {
            var str = convertArrayBufferToString(info.data);
            if (str.charAt(str.length-1) === '\n') {
              stringReceived += str.substring(0, str.length-1);
              $('#member').val(onLineReceived(stringReceived));
              stringReceived = '';
            } else {
              stringReceived += str;
            }
          }
        };
  
      chrome.serial.onReceive.addListener(onReceiveCallback);
  
  </pre>
  
  <p>Background.js:</p>
  
  <pre><code>chrome.app.runtime.onLaunched.addListener(function() {
      chrome.app.window.create('window.html', {
          'bounds': {
              'width': 1024,
              'height': 768
          },
          "resizable": false
      });
  });
  </code></pre>
  
  <p>Window.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Serial Reader&lt;/title&gt;
          &lt;script type="text/JavaScript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body {
                  background-image: url(/images/checkin_green.png);
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;center&gt;&lt;strong style="font-size: 16px;"&gt;Account Number:&lt;/strong&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input id="member" /&gt;&lt;/center&gt;
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;center&gt;&lt;strong style="font-size: 16px;"&gt;Avaliable Ports:&lt;/strong&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;select id="portList"&gt;&lt;/select&gt;&lt;/center&gt;
          &lt;br /&gt;
          &lt;center&gt;&lt;span id="notFound"&gt;&lt;/span&gt;&lt;/center&gt;
  
          &lt;script type="text/JavaScript" src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have been playing around with this for quite some time and cannot come up with a solution. I don't understand how it can populate the list of ports but then three lines down say that it is undefined. Any help would be greatly appreciated! Thanks!</p>