Chrome Extension. - reload current tab when extension settings are saved

Question

I'm writing a simple extension for my own use. It basically binds to a field on a web page and preforms an action when you click into the field or out of it. This is working fine.

The issue I have is the extension has some configuration fields that need to be populated. When the extension icon is clicked the config page is shown and includes some js to read and save the settings.

For example.

When the page loads I read the values. This is one example:

chrome.storage.sync.get("id", function(items) {
    if (!chrome.runtime.error) {
        id = (typeof(items.id) != "undefined" && items.id !== null) ? items.id : '';
        document.getElementById("id").value = id; 
    }
});

Once the config pages save button is clicked the values are saved.

var id = document.getElementById("id").value;
    chrome.storage.sync.set({ "id" : id }, function() {
        if (chrome.runtime.error) console.log("Runtime error.");
});

and the config page is closed:

window.close();

As the values were originally loaded with the page, the new values won't go live until the page is reloaded.

Is there anyway to either force the use of the new values, or reload the active tab ?

Thanks

UPDATE

I've tried adding the following to my background page and I can see the change, but it doesn't seem to update the variable live.

chrome.storage.onChanged.addListener( function( changes ) {
    console.log( changes );
    id = changes.id
});

When the id is invalid I should get an error message. But checking the console it's still sending the original id, not the new updated on.

How do I resolve this ? Thanks

I've updated as follows:

chrome.storage.onChanged.addListener(changes => {
  
    updateId(changes.id.newValue);
  
});


function updateId(data) {
  
  id = data
  console.log (' ID = ' + id )
}

The console.log shows the new id but the script is still using the old id.

What am I missing ? Thanks

Update

This is a breakdown of what my current code does. The popup.js is used to read and save the ID the user enters.

document.addEventListener('DOMContentLoaded', function() {
    
    chrome.storage.sync.get("id", function(items) {
        if (!chrome.runtime.error) {
            id = (typeof(items.id) != "undefined" && items.id !== null) ? items.id : '';
            document.getElementById("id").value = id; 
        }
    });
    
    var link = document.getElementById('save');
        link.addEventListener('click', function() {
        
        var id = document.getElementById("id").value;
        chrome.storage.sync.set({ "id" : id }, function() {
            if (chrome.runtime.error) console.log("Runtime error.");
        });
    
        window.close();
        
    });

});

myscript.js is used to detect the click in to and out of a specific field and then a command is passed to the background script.

    jQuery(document).ready(function() {

    helloCatAsync( function( result ) {
        id      = (typeof(result[0]) != "undefined" && result[0] !== null) ? result[0] : '';
        
        $('#siteid').focusout(function () {
            cmd = 'http://192.168.0.1/site.php?update=1&id=' + id
            
            chrome.runtime.sendMessage({ cmd }, (response) => {
                console.log(response.result);
            });
            
        });
        
        $('siteid').focusin(function () {
            cmd = 'http://192.168.0.1/site.php?clear=1&id=' + id
            
            chrome.runtime.sendMessage({ cmd }, (response) => {
                console.log(response.result);
            });
        
        });
        
        
    });

    function helloCatAsync( callback ) {
        chrome.storage.sync.get(null, function(items) {
            var allValues = Object.values(items);
            callback(allValues) ; 
        });
    }
});

eventPage.js runs the commands passed to it and returns the results. In here I've also tried to add the onChanged listener to update the value of id when it is saved.

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    
    $.ajax({
        type: "POST",
        url: msg.cmd,
        success: function(data) {
            sendResponse({ result: data });
        },
        
        error: function(e) {
            sendResponse({ result: data });
        }
    });

    return true
    
});

chrome.storage.onChanged.addListener(changes => {
  
    updateId(changes.id.newValue);
  
});


function updateId(data) {
  
  id = data
  console.log (' ID = ' + id )
}

My aim is if the user goes into the configuration popup page and changes the id and clicks save, the new id is used straightaway, currently it requires a reload of the page.

My manifest.json contains:

"background": {
        "scripts": ["jquery.js", "eventPage.js"],
        "persistent": false
    },
  
    "content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],
        "css": ["styles.css"],
        "js": ["jquery.js", "myscript.js"]
    }
    ],
    "icons": { 
        "16": "logo16.png",
        "48": "logo48.png",
        "128": "logo128.png"
    },
    
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    }

Thanks