Текущий URL Chrome не определен, если я пытаюсь получить его напрямую

Question

Я создаю расширение, которое при нажатии должно показывать в popup.html ссылку на текущую страницу, с которой я щелкнул расширение. Переменная хранит «неопределенный».

Я попытался загрузить .html с пустым p, который должен содержать данные текущего URL.

popup.html

    <script src="popup.js"></script>
    <script src="background.js"></script> 
    <p id="thisUrl"></p>
  </body>
</html>

popup.js

var currentURL;

chrome.tabs.query({'active': true, currentWindow:true, 'windowId': chrome.windows.WINDOW_ID_CURRENT}, 
function(tabs){
    getCurrentURL(tabs[0].url);
});

function getCurrentURL(tab){
    currentURL = tab;
}


document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('thisUrl').innerHTML = currentURL;
});

р с идентификатором 'showUrl' должен показывать, например, https://stackoverflow.com/questions/ask но вместо этого показывает неопределенное. Я также попытался добавить JS в фоновый файл JS, но результаты те же. Используемые разрешения:

  "permissions": [
     "activeTab",
     "tabs"
     ]