title: Why doesn't chrome.tabs.query() return the tab's URL when called using RequireJS in a Chrome extension?
body: <p>I have a simple Chrome extension that adds a browser action.  When the extension's popup is opened, it needs to access the current tab's URL.  Since it doesn't need access to all the tabs, I just have the <code>activeTab</code> permission specified in the manifest:</p>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "RequireJS Test",
      "version": "0.0.1",
      "description": "Test RequireJS and the activeTab permission.",
      "permissions": [
          "activeTab"
      ],
      "browser_action": {
          "default_popup": "popup.html"
      },
      "web_accessible_resources": [
          "js/*",
          "html/*",
          "css/*",
          "img/*"
      ]
  }
  </code></pre>
  
  <p>In theory, that should give the popup access to the active tab's URL, but the URL is not returned when I query the tabs from within a <code>require()</code> call in the popup's <code>main.js</code> file:</p>
  
  <pre><code>require([], function() {
      chrome.tabs.query({"active": true, "lastFocusedWindow": true}, function (tabs) {
          var url = tabs[0].url;
          console.log("URL from main.js", url);
      });
  
      console.log("URL from global var accessed in main.js", tabURL);
  });
  </code></pre>
  
  <p>The console shows <code>undefined</code> for the URL.  However, if I make the same call from a plain .js file that doesn't use <code>require()</code>, it works fine:</p>
  
  <pre><code>chrome.tabs.query({"active": true, "lastFocusedWindow": true}, function (tabs) {
      tabURL = tabs[0].url;
      console.log("URL from get-url.js", tabURL);
  });
  </code></pre>
  
  <p>That displays the correct URL, and I can access that global <code>tabURL</code> inside the <code>require()</code> call just fine.  When I right-click the browser button and inspect the popup, the console output looks like this:</p>
  
  <pre><code>URL from get-url.js http://stackoverflow.com/questions/ask
  URL from global var accessed in main.js http://stackoverflow.com/questions/ask
  URL from main.js undefined
  </code></pre>
  
  <p>Even stranger is that I've <em>sometimes</em> seen the URL available from within that call to <code>chrome.tabs.query()</code> inside the <code>require()</code> call.  But mostly it doesn't work.  Something about how RequireJS loads scripts seems to confuse Chrome and take away the URL access for the loaded script.  This is in Chrome 40 on Windows. </p>
  
  <p>Obviously, the workaround is to grab the URL in a separate script and store it in a variable, but that feels a bit kludgy.  I'd like to see if there's a proper way of getting this to work with RequireJS. </p>
  
  <p>The full plugin source is here if anyone wants to test it on their machine: <a href="https://github.com/fwextensions/requirejs-url-test" rel="noreferrer">https://github.com/fwextensions/requirejs-url-test</a>
  <hr></p>
  
  <h2>Edit</h2>
  
  <p>As Rob W. explains below, this actually has nothing to do with RequireJS.  The only reason that the code in my <code>get-url.js</code> file above returned the correct URL was that it happened to run before the devtools window opened.  If I change that file to this:</p>
  
  <pre><code>setTimeout(function() {
  chrome.tabs.query({"active": true, "lastFocusedWindow": true}, function (tabs) {
      tabURL = tabs[0].url;
      console.log("URL from get-url.js", tabURL);
  });
  }, 5000);
  </code></pre>
  
  <p>Then it runs after the devtools window is open and fails as well.  RequireJS isn't the culprit. </p>