title: Cross Domain Ajax in Chrome Extensions Failing Inside Functions
body: <p>My extension is doing a cross-domain ajax post -- whenever I perform the function:</p>
  
  <pre><code>$.ajax({
      crossDomain: true,
      type: 'post',
      url: 'url/to/my.php',
      data: {
          "username" : $user,
          "score"  : $score,
          "action" : "update"
      },
      success: function (data) {
          if (data.replace(/"/g,"") === 'true') {
              $('#form-container').html('&lt;p&gt;Score!&lt;/p&gt;');
          } else {
              $('#form-container').prepend('&lt;p&gt;No score.&lt;/p&gt;');
          }
      },
      error: function (xhr, ajaxOptions, thrownError) {
          console.log(thrownError);
          console.log('error');
      }
  });
  </code></pre>
  
  <p>The problem is, if I place this call outside of any containing functions (on its own) then it will run just fine.  The second I place this inside of a function Chrome cancels the ajax call.  I don't get any errors, console logging inside the call doesn't send anything to console, and the only error I see is in Developer Tools when recording Network (where it shows the request being canceled).  Is this by design or am I missing something?</p>
  
  <p>It's using form data in the ajax call, so leaving it on its own isn't really an option.  Are there other suggested methods for performing the same action?</p>
  
  <p>The full code is:</p>
  
  <pre><code>$(document).ready( function () {
      $('#score').submit( function (e) {
          var user = $('#username').val();
          var score = $('#score').val();
  
          if (user &amp;&amp; score) {
              send_score(user, score);
          }
      });
  });
  
  function send_score(user,score) {
      console.log(user + ' ' + score);
      $.ajax({
          crossDomain: true,
          type: 'post',
          url: 'url/up/my.php',
          data: {
              "username" : user,
              "score"  : score,
              "action" : "login"
          },
          success: function (data) {
              if (data.replace(/"/g,"") === 'true') {
                  $('#form-container').html('&lt;p&gt;Score!&lt;/p&gt;');
              } else {
                  $('#form-container').prepend('&lt;p&gt;No score.&lt;/p&gt;');
              }
          },
          error: function (xhr, ajaxOptions, thrownError) {
              console.log(thrownError);
              console.log('error');
          }
      });
  }
  </code></pre>
  
  <p>Thanks in advance.</p>