Chrome Extension, result of chrome.tabs.query is undefined

Question

I am a HTML/Javascript novice trying to create a simple Browser Action" chrome extension. I have spent several hours trying to get a piece of it to work. When the popup opens, a button exists called"myBtn", when clicked an element with the ID of "Demo" is supposed to change from text to innerHTML that is the current tabs Url. I have managed to get to a point where upon clicking the button the default text is replaced with "undefined". Every change I make to fix this seems to take me backward. I have read many posts on this and other sites but cannot resolve. Anyone see the error in my code preventing the Url from diplaying?

I have "tabs" and "activeTab" permissions in the manifest. relevant code is:

"manifest_version": 2,
"name": "Sample",
"description": "This extension launches Form on current page",
"version": "1.0",

"icons": { "128": "ITVCicon128x128.png" },

"browser_action": {
"default_icon": "ITVCicon.png",
"default_popup": "popup.html"
 },
"permissions": [
      "tabs",
  "activeTab",
      "https://ajax.googleapis.com/"

Popup.html is:

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p> click the button to get the current tab URL for cut/paste  <button
id="myBtn"> Try it</button> </p>
<p id="demo">Url displays Here</p>
<script src="popup.js"></script>
</body>
</html>

The popup.js containing the functions is:

function geturl() {
document.getElementById("demo") .innerHTML = 
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var tabURL = tabs[0].url;
    console.log(tabURL);
});
}

document.getElementById("myBtn").addEventListener("click", geturl);

Tabs.query is asynchronous; it doesn't return anything. See http://stackoverflow.com/q/23667086/2336725 — Teepeemm, Apr 08 '15 at 01:25

Dayton Wang · Accepted Answer · 2015-04-08T16:14:33.977

I modified your popup.js and used DOMContentLoaded as Chrome extension suggested like:

popup.js:

function geturl() {
  chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
  var tabURL = tabs[0].url;
     document.getElementById("demo").innerHTML = tabURL; //The line I changed to pass the URL to html.
   });
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("myBtn").addEventListener("click", geturl);
});

So you don't have to put your popup.js at end of the body in popup.html. I changed as:

popup.html:

<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<p> click the button to get the current tab URL for cut/paste  
<button id="myBtn"> Try it</button> </p>
<p id="demo">Url displays Here</p>
</body>
</html>

Finally, I tested it works with me.

Oh lord. No, it is not `DOMContentLoaded` that worked. @gui47, can you _please_ highlight the actually _useful_ code change here? The `DOMContentLoaded` change was not required (script tag is after the element). — Xan, Apr 08 '15 at 07:21
@Xan I've modified the comment that indicates where I changed the code. — Dayton Wang, Apr 08 '15 at 16:16

Chrome Extension, result of chrome.tabs.query is undefined

1 Answers1