Switched to a listener map.

SB.js

@@ -1,21 +1,69 @@
 SB = {};
 
+class ListenerMap extends Map {
+    constructor(name) {
+        super();
+
+        this.name = name;
+    }
+
+    set(key, value) {
+        super.set(key, value);
+
+        this.updateListener(this.name, this);
+    }
+
+    delete(key) {
+        this.updateListener(this.name, this);
+
+        return super.set(key);
+    }
+
+    clear() {
+        return super.clear();
+    }
+
+    forEach(callbackfn) {
+        return super.forEach(callbackfn);
+    }
+
+    get(key) {
+        return super.get(key);
+    }
+
+    has(key) {
+        return super.has(key);
+    }
+}
+
+function mapHandler(name, object) {
+    SB.config[name] = SB.config[name];
+    // chrome.storage.sync.set({
+    //     [name]: object
+    // });
+
+    // console.log(name)
+    // console.log(object)
+}
+
 function configProxy() {
     chrome.storage.onChanged.addListener((changes, namespace) => {
         for (key in changes) {
             SB.localconfig[key] = changes[key].newValue;
         }
     });
+
     var handler = {
         set: function(obj, prop, value) {
             chrome.storage.sync.set({
                 [prop]: value
-            })
+            });
         },
         get: function(obj, prop) {
-            return SB.localconfig[prop]
+            return SB.localconfig[prop];
         }
     };
+
     return new Proxy({}, handler);
 }
 
@@ -38,12 +86,17 @@ function migrate() { // Convert sponsorTimes format
 async function config() {
     await fetchConfig();
     addDefaults();
+    // Setup sponsorTime listener
+    SB.localconfig.sponsorTimes.updateListener = mapHandler;
+
     SB.config = configProxy();
-	migrate();
+    migrate();
+    
+    
 }
 
 SB.defaults = {
-	"sponsorTimes": new Map(),
+	"sponsorTimes": new ListenerMap("sponsorTimes"),
 	"startSponsorKeybind": ";",
 	"submitKeybind": "'",
 	"minutesSaved": 0,

background.js

@@ -4,7 +4,9 @@ chrome.tabs.onUpdated.addListener(function(tabId) {
 	}, () => void chrome.runtime.lastError ); // Suppress error on Firefox
 });
 
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+chrome.runtime.onMessage.addListener(async function (request, sender, callback) {
+    await wait(() => SB.config !== undefined);
+
 	switch(request.message) {
     case "submitTimes":
         submitTimes(request.videoID, callback);

content.js

@@ -238,17 +238,17 @@ function videoIDChange(id) {
     //warn them if they had unsubmitted times
     if (previousVideoID != null) {
         //get the sponsor times from storage
-            let sponsorTimes = SB.config.sponsorTimes.get(previousVideoID);
+        let sponsorTimes = SB.config.sponsorTimes.get(previousVideoID);
-            if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-                //warn them that they have unsubmitted sponsor times
+            //warn them that they have unsubmitted sponsor times
-                    chrome.runtime.sendMessage({
+                chrome.runtime.sendMessage({
-                        message: "alertPrevious",
+                    message: "alertPrevious",
-                        previousVideoID: previousVideoID
+                    previousVideoID: previousVideoID
-                    })
+                })
-            }
+        }
 
-            //set the previous video id to the currentID
+        //set the previous video id to the currentID
-            previousVideoID = id;
+        previousVideoID = id;
     } else {
         //set the previous id now, don't wait for chrome.storage.get
         previousVideoID = id;
@@ -904,27 +904,27 @@ function submitSponsorTimes() {
 
     let currentVideoID = sponsorVideoID;
 
-        let sponsorTimes =  SB.config.sponsorTimes.get(currentVideoID);
+    let sponsorTimes =  SB.config.sponsorTimes.get(currentVideoID);
 
-        if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-            //check if a sponsor exceeds the duration of the video
+        //check if a sponsor exceeds the duration of the video
-            for (let i = 0; i < sponsorTimes.length; i++) {
+        for (let i = 0; i < sponsorTimes.length; i++) {
-                if (sponsorTimes[i][1] > v.duration) {
+            if (sponsorTimes[i][1] > v.duration) {
-                    sponsorTimes[i][1] = v.duration;
+                sponsorTimes[i][1] = v.duration;
-                }
             }
-            //update sponsorTimes
-			SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
-
-            //update sponsorTimesSubmitting
-            sponsorTimesSubmitting = sponsorTimes;
-
-            let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes)
-                                    + "\n\n" + chrome.i18n.getMessage("confirmMSG")  + "\n\n" + chrome.i18n.getMessage("guildlinesSummary");
-            if(!confirm(confirmMessage)) return;
-
-            sendSubmitMessage();
         }
+        //update sponsorTimes
+        SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
+
+        //update sponsorTimesSubmitting
+        sponsorTimesSubmitting = sponsorTimes;
+
+        let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes)
+                                + "\n\n" + chrome.i18n.getMessage("confirmMSG")  + "\n\n" + chrome.i18n.getMessage("guildlinesSummary");
+        if(!confirm(confirmMessage)) return;
+
+        sendSubmitMessage();
+    }
 
 }
 

popup.js

@@ -21,6 +21,8 @@ async function runThePopup() {
             inPopup = false;
     }
 
+    await wait(() => SB.config !== undefined);
+
     ["sponsorStart",
     // Top toggles
     "whitelistChannel",
@@ -102,108 +104,108 @@ async function runThePopup() {
     let currentVideoID = null;
   
     //see if discord link can be shown
-        let hideDiscordLink = SB.config.hideDiscordLink;
+    let hideDiscordLink = SB.config.hideDiscordLink;
-        if (hideDiscordLink == undefined || !hideDiscordLink) {
+    if (hideDiscordLink == undefined || !hideDiscordLink) {
-                let hideDiscordLaunches = SB.config.hideDiscordLaunches;
+            let hideDiscordLaunches = SB.config.hideDiscordLaunches;
-                //only if less than 10 launches
+            //only if less than 10 launches
-                if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
+            if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
-                    SB.discordButtonContainer.style.display = null;
+                SB.discordButtonContainer.style.display = null;
         
-                    if (hideDiscordLaunches == undefined) {
+                if (hideDiscordLaunches == undefined) {
-                        hideDiscordLaunches = 1;
+                    hideDiscordLaunches = 1;
-                    }
-					SB.config.hideDiscordLaunches = hideDiscordLaunches + 1;
                 }
-        }
+                SB.config.hideDiscordLaunches = hideDiscordLaunches + 1;
+            }
+    }
 
     //show proper disable skipping button
-        let disableSkipping = SB.config.disableSkipping;
+    let disableSkipping = SB.config.disableSkipping;
-        if (disableSkipping != undefined && disableSkipping) {
+    if (disableSkipping != undefined && disableSkipping) {
-            SB.disableSkipping.style.display = "none";
+        SB.disableSkipping.style.display = "none";
-            SB.enableSkipping.style.display = "unset";
+        SB.enableSkipping.style.display = "unset";
-        }
+    }
 
     //if the don't show notice again variable is true, an option to 
     //  disable should be available
-        let dontShowNotice = SB.config.dontShowNotice;
+    let dontShowNotice = SB.config.dontShowNotice;
-        if (dontShowNotice != undefined && dontShowNotice) {
+    if (dontShowNotice != undefined && dontShowNotice) {
-            SB.showNoticeAgain.style.display = "unset";
+        SB.showNoticeAgain.style.display = "unset";
-        }
+    }
 
     //get the amount of times this user has contributed and display it to thank them
-        if (SB.config.sponsorTimesContributed != undefined) {
+    if (SB.config.sponsorTimesContributed != undefined) {
-            if (SB.config.sponsorTimesContributed > 1) {
+        if (SB.config.sponsorTimesContributed > 1) {
-                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
+            SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
-            } else {
+        } else {
-                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
+            SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
-            }
-            SB.sponsorTimesContributionsDisplay.innerText = SB.config.sponsorTimesContributed;
-            SB.sponsorTimesContributionsContainer.style.display = "unset";
-  
-            //get the userID
-                let userID = SB.config.userID;
-                if (userID != undefined) {
-                    //there are probably some views on these submissions then
-                    //get the amount of views from the sponsors submitted
-                    sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
-                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-                            let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
-                            if (viewCount != 0) {
-                                if (viewCount > 1) {
-                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
-                                } else {
-                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
-                                }
-
-                                SB.sponsorTimesViewsDisplay.innerText = viewCount;
-                                SB.sponsorTimesViewsContainer.style.display = "unset";
-                            }
-                        }
-                    });
-
-                    //get this time in minutes
-                    sendRequestToServer("GET", "/api/getSavedTimeForUser?userID=" + userID, function(xmlhttp) {
-                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-                            let minutesSaved = JSON.parse(xmlhttp.responseText).timeSaved;
-                            if (minutesSaved != 0) {
-                                if (minutesSaved != 1) {
-                                    SB.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
-                                } else {
-                                    SB.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minLower");
-                                }
-
-                                SB.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
-                                SB.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
-                            }
-                        }
-                    });
-                }
         }
+        SB.sponsorTimesContributionsDisplay.innerText = SB.config.sponsorTimesContributed;
+        SB.sponsorTimesContributionsContainer.style.display = "unset";
+
+        //get the userID
+            let userID = SB.config.userID;
+            if (userID != undefined) {
+                //there are probably some views on these submissions then
+                //get the amount of views from the sponsors submitted
+                sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
+                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+                        let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
+                        if (viewCount != 0) {
+                            if (viewCount > 1) {
+                                SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
+                            } else {
+                                SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
+                            }
+
+                            SB.sponsorTimesViewsDisplay.innerText = viewCount;
+                            SB.sponsorTimesViewsContainer.style.display = "unset";
+                        }
+                    }
+                });
+
+                //get this time in minutes
+                sendRequestToServer("GET", "/api/getSavedTimeForUser?userID=" + userID, function(xmlhttp) {
+                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+                        let minutesSaved = JSON.parse(xmlhttp.responseText).timeSaved;
+                        if (minutesSaved != 0) {
+                            if (minutesSaved != 1) {
+                                SB.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
+                            } else {
+                                SB.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minLower");
+                            }
+
+                            SB.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
+                            SB.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
+                        }
+                    }
+                });
+            }
+    }
 
     //get the amount of times this user has skipped a sponsor
-        if (SB.config.skipCount != undefined) {
+    if (SB.config.skipCount != undefined) {
-            if (SB.config.skipCount != 1) {
+        if (SB.config.skipCount != 1) {
-                SB.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Sponsors");
+            SB.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Sponsors");
-            } else {
+        } else {
-                SB.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Sponsor");
+            SB.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Sponsor");
-            }
-
-            SB.sponsorTimesSkipsDoneDisplay.innerText = SB.config.skipCount;
-            SB.sponsorTimesSkipsDoneContainer.style.display = "unset";
         }
 
+        SB.sponsorTimesSkipsDoneDisplay.innerText = SB.config.skipCount;
+        SB.sponsorTimesSkipsDoneContainer.style.display = "unset";
+    }
+
     //get the amount of time this user has saved.
-        if (SB.config.minutesSaved != undefined) {
+    if (SB.config.minutesSaved != undefined) {
-            if (SB.config.minutesSaved != 1) {
+        if (SB.config.minutesSaved != 1) {
-                SB.sponsorTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
+            SB.sponsorTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
-            } else {
+        } else {
-                SB.sponsorTimeSavedEndWord.innerText = chrome.i18n.getMessage("minLower");
+            SB.sponsorTimeSavedEndWord.innerText = chrome.i18n.getMessage("minLower");
-            }
-
-            SB.sponsorTimeSavedDisplay.innerText = getFormattedHours(SB.config.minutesSaved);
-            SB.sponsorTimeSavedContainer.style.display = "unset";
         }
 
+        SB.sponsorTimeSavedDisplay.innerText = getFormattedHours(SB.config.minutesSaved);
+        SB.sponsorTimeSavedContainer.style.display = "unset";
+    }
+  
     chrome.tabs.query({
             active: true,
             currentWindow: true
@@ -229,23 +231,25 @@ async function runThePopup() {
         }
   
         //load video times for this video 
-            let sponsorTimesStorage = SB.config.sponsorTimes.get(currentVideoID);
+        console.log( SB.config.sponsorTimes.set)
-            if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
+        setTimeout(()=> console.log( SB.config.sponsorTimes.set), 200        )
-                if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
+        let sponsorTimesStorage = SB.config.sponsorTimes.get(currentVideoID);
-                    startTimeChosen = true;
+        if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
-                    SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
+            if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
-                }
+                startTimeChosen = true;
-  
+                SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
-                sponsorTimes = sponsorTimesStorage;
-  
-                displaySponsorTimes();
-  
-                //show submission section
-                SB.submissionSection.style.display = "unset";
-  
-                showSubmitTimesIfNecessary();
             }
 
+            sponsorTimes = sponsorTimesStorage;
+
+            displaySponsorTimes();
+
+            //show submission section
+            SB.submissionSection.style.display = "unset";
+
+            showSubmitTimesIfNecessary();
+        }
+  
         //check if this video's sponsors are known
         chrome.tabs.sendMessage(
             tabs[0].id,