'Chrome extension message sending from background to content issue

I'm trying to send the current active URL from any updated tab to it's respective content script with the code below. I'm having trouble confirming receipt of any message in the content script/page console. However, the console.log's in background.js are showing up..

I've also noticed that sometimes the changeInfo.url will send as undefined? If I remove the if (changeInfo.url) { conditional from background.js, the background script will log out 2-3 times per page-load, with the latter instances logging changeInfo.url as undefined.

I'm new to Chrome extension development, what am I missing? Thanks!

background.js :

chrome.tabs.onUpdated.addListener( 
    function(tabId, changeInfo, tab) {
    if (changeInfo.url) {
        console.log(tabId, changeInfo.url, tab);
        chrome.tabs.sendMessage( tabId, {
            message: 'hello!',
            url: changeInfo.url
        })
    }
});

content.js :

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        console.log("this is the url:" + request.url)
    }
)


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source