get chrome storage values via local getter setter class but I can’t

I created a local class in JS file with following code :

class CustomChromeStorage {
    //#region userName
    get userName() {

        let isCurrentValueSet = false;
        chrome.storage.sync.get('userName', function (obj) {
            this._userName = obj;
            isCurrentValueSet = true;
        });
        while (true) {
            if (isCurrentValueSet) {
                return this._userName;
            }
        }
    }

    set userName(newValue) {
        this._userName = newValue;
        chrome.storage.sync.set({ 'userName': newValue }, function () {
        });
    }
    remove_userName() {
        this._userName = null;
        chrome.storage.sync.remove('userName', function () {
        });
    }
    //#endregion userName

My Idea to do such type of code is when I write somewhere else in my code like :

alert(new CustomChromeStorage().userName);

Then my code simply fetches username from chrome storage and show it via alert. As we know that in order to fetch values from chrome storage we need to create a callback function then value of particular variable is given by particular callback function. I know this is very good practice for asynchronous process but it sometimes becomes cumbersome for me to handle each and every callback function. So, I just want that when I fetch value from chrome storage via my custom class then execution of current code gets paused until response does not get from callback function (like synchronous process). That’s why I written infinite while loop inside getter method of that property but the problem is when I try to alert username via custom chrome storage class my total program execution becomes hang.

The reason behind it is initially I set isCurrentValueSet = false which never gets true inside while loop. If anybody have any idea why it does not set to true inside while loop then please let me know.

Thanks for showing interest into my problem.