Update Notification Banner & Improvements

- Update banner on settings page with 2 options: go to releases page on this GitHub repository or to skip this update (unrecommended)

- You can now skip updates (again, unrecommended)

- Added "Reset to Default" button on all options modals on the settings page which will reset that setting's specific options to their defaults.

- Removed element IDs from the "Modify Navbar" feature options modal (they were there due to the old way options modals worked before release)

- Renamed polyplus-settings.js to settings.js

- Updated all "IRL Price with Brick Count" display code to have different variable names

- "IRL Price with Brick Count" is more accurate by parsing abbreviated numbers into their full number (fixing odd bugs that would happen with things such as a user's networth) - it is still not super accurate when it comes to users' networth but it's way better than before

 - You can now clear specific data locations (chrome.storage.sync and chrome.storage.local) on the extension's debug page

- Updated update notifier code

- The profile page now uses the utilities to calculate the "IRL Price with Brick Count" result rather than using the old repetitive code

- Added another extension icon for when the extension has an update available - it currently isn't used anywhere due to the code for it not working for some reason

js/account/home.js

@@ -174,16 +174,14 @@ async function IRLPrice() {
         Utilities = Utilities.default
 
         const TrendingItems = document.getElementById('home-trendingItems')
-        console.log(TrendingItems.children[1].getElementsByClassName('d-flex')[0].children)
         for (let item of TrendingItems.children[1].getElementsByClassName('d-flex')[0].children) {
             const Price = item.getElementsByClassName('text-success')[0]
-            console.log(item, Price)
+            const IRLResult = await Utilities.CalculateIRL(Price.innerText, Settings.IRLPriceWithCurrencyCurrency)
-            const Result = await Utilities.CalculateIRL(Price.innerText, Settings.IRLPriceWithCurrencyCurrency)
             
             let Span = document.createElement('span')
             Span.classList = 'text-muted polyplus-price-tag'
             Span.style.fontSize = '0.7rem'
-            Span.innerText = "($" + Result.bricks + " " + Result.display + ")"
+            Span.innerText = "($" + IRLResult.result + " " + IRLResult.display + ")"
             Price.appendChild(Span)
         }
     })();

js/account/profile.js

@@ -6,16 +6,19 @@ var BestFriends;
 let FavoriteBtn;
 let CalculateButton;
 
+let Utilities;
+
 if (UserID && !isNaN(UserID)) {
     chrome.storage.sync.get(['PolyPlus_Settings'], function(result) {
-        Settings = result.PolyPlus_Settings || {
+        Settings = result.PolyPlus_Settings || {}
-            IRLPriceWithCurrencyOn: false,
-            BestFriendsOn: false,
-            OutfitCostOn: true
-        }
 
         if (Settings.IRLPriceWithCurrencyOn === true) {
-            IRLPrice()
+            (async () => {
+                Utilities = await import(chrome.runtime.getURL('/js/resources/utils.js'));
+                Utilities = Utilities.default
+
+                IRLPrice()
+            })();
         }
     
         if (Settings.BestFriendsOn === true) {
@@ -99,42 +102,11 @@ if (UserID && !isNaN(UserID)) {
         });
 }
 
-function IRLPrice() {
+async function IRLPrice() {
     const NetWorthElement = document.getElementsByClassName('float-end text-success')[0];
-    const NetWorth = parseInt(NetWorthElement.innerText.replace(/,/g, ''));
+    //const NetWorth = parseInt(NetWorthElement.innerText.replace(/,/g, ''));
-    let IRL;
+    const IRLResult = await Utilities.CalculateIRL(NetWorthElement.innerText, Settings.IRLPriceWithCurrencyCurrency)
-    let DISPLAY;
+    NetWorthElement.innerText = NetWorthElement.innerText + " ($" + IRLResult.result + " " + IRLResult.display + ")"
-    switch (Settings.IRLPriceWithCurrencyCurrency) {
-        case 0:
-            IRL = (NetWorth * 0.0099).toFixed(2)
-            DISPLAY = 'USD'
-            break
-        case 1:
-            IRL = (NetWorth * 0.009).toFixed(2)
-            DISPLAY = 'EUR'
-            break
-        case 2:
-            IRL = (NetWorth * 0.0131).toFixed(2)
-            DISPLAY = 'CAD'
-            break
-        case 3:
-            IRL = (NetWorth * 0.0077).toFixed(2)
-            DISPLAY = 'GBP'
-            break
-        case 4:
-            IRL = (NetWorth * 0.1691).toFixed(2)
-            DISPLAY = 'MXN'
-            break
-        case 5:
-            IRL = (NetWorth * 0.0144).toFixed(2)
-            DISPLAY = 'AUD'
-            break
-        case 6:
-            IRL = (NetWorth *  0.2338).toFixed(2)
-            DISPLAY = 'TRY'
-            break
-    }
-    NetWorthElement.innerText = NetWorthElement.innerText + " ($" + IRL + " " + DISPLAY + ")"
 }
 
 function BestFriends() {
@@ -255,4 +227,5 @@ async function OutfitCost() {
     TotalCostText.innerHTML = `${ (AvatarCost.Limiteds > 0 || AvatarCost.Exclusives > 0) ? '~' : '' }<i class="pi pi-brick me-2"></i> ${AvatarCost.Total.toLocaleString()}${ (AvatarCost.Limiteds > 0) ? ` (has ${AvatarCost.Limiteds} limiteds)` : '' }${ (AvatarCost.Exclusives > 0) ? ` (has ${AvatarCost.Exclusives} exclusives)` : '' }`
     AvatarRow.parentElement.parentElement.prepend(TotalCostText)
     AvatarRow.parentElement.style.marginTop = '10px'
+    CalculateButton.remove();
 }

js/account/settings-privacy.js

@@ -2,16 +2,16 @@ setTimeout(function () {}, 100)
 
 chrome.storage.sync.get(['PolyPlus_Settings'], function(result){
     if (result.PolyPlus_Settings.MoreSearchFiltersOn === true) {
-        let BlockedUsersCard = document.getElementsByClassName('card-body')[1]
+        const BlockedUsersCard = document.getElementsByClassName('card-body')[1]
-        let InputGroup = document.createElement('div')
+        const InputGroup = document.createElement('div')
         InputGroup.classList = 'input-group mb-2'
         InputGroup.innerHTML = `
         <input id="blocked-users-search" type="text" class="form-control bg-dark" placeholder="Search blocked users...">
         <button id="blocked-users-confirm" class="btn btn-secondary"><i class="fad fa-search"></i></button>
         `
         BlockedUsersCard.insertBefore(InputGroup, BlockedUsersCard.children[0])
-        let SearchBar = document.getElementById('blocked-users-search')
+        const SearchBar = document.getElementById('blocked-users-search')
-        let ConfirmBtn = document.getElementById('blocked-users-confirm')
+        const ConfirmBtn = document.getElementById('blocked-users-confirm')
 
         ConfirmBtn.addEventListener('click', function(){
             SearchBlockedUsers(SearchBar.value);

js/account/transactions.js

@@ -68,9 +68,9 @@ Package.addEventListener('change', function(){
 async function Update(){
     //let DISPLAY = Type.options[Type.selectedIndex].value
     //let IRL = (parseInt(Input.value.replace(/,/g, '')) * Currencies.Data[Package.selectedIndex][DISPLAY]).toFixed(2)
-    const Result = await Utilities.CalculateIRL(Input.value, Type.selectedIndex)
+    const IRLResult = await Utilities.CalculateIRL(Input.value, Type.selectedIndex)
     console.log(Input.value, Type.options[Type.selectedIndex].value, Result)
-    Output.value = "$" + Result.bricks  + " " + Result.display
+    Output.value = "$" + IRLResult.result  + " " + IRLResult.display
 }
 
 function LoadFile(path, callback) {

js/background.js

@@ -1,8 +1,9 @@
 const Manifest = chrome.runtime.getManifest()
+const SettingsURL = chrome.runtime.getURL('settings.html')
 
 // WHEN CLICKING ON EXTENSION ICON OPEN THE SETTINGS PAGE
 chrome.action.onClicked.addListener((tab) => {
-    chrome.tabs.create({ active: true, url: chrome.runtime.getURL('settings.html') });
+    chrome.tabs.create({ active: true, url: SettingsURL });
 });
 
 // REGISTER AN ALARM FOR DAILY UPDATE CHECK
@@ -23,41 +24,72 @@ function GetNext12PM() {
 // HANDLE ALARMS FIRING
 chrome.alarms.onAlarm.addListener(function(alarm){
     if (alarm.name === 'PolyPlus-UpdateCheck') {
-        fetch('https://polyplus.vercel.app/data/version.json')
+        RunUpdateNotifier()
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Network not ok')
-                }
-                return response.json()
-            })
-            .then(data => {
-                if (data.version > Manifest.version) {
-                    chrome.notifications.create("", {
-                        type: "basic",
-                        iconUrl: chrome.runtime.getURL("icon.png"),
-                        title: "New Update Available",
-                        message: "A new update is available for Poly+! (v" + data.version + ")",
-                        requiresInteraction: true
-                    }, function(notificationID) {
-                        chrome.notifications.onClicked.addListener(function (id) {
-                            if (id === notificationID) {
-                                chrome.tabs.create({url: 'https://github.com/IndexingGitHub/PolyPlus/releases', active: true})
-                                chrome.notifications.clear(notificationID)
-                            }
-                        })
-                    })
-                }
-            })
-            .catch(error => {console.log(error)})
     }
 });
+function RunUpdateNotifier() {
+    chrome.storage.local.get(["PolyPlus_LiveVersion", "PolyPlus_OutOfDate", "PolyPlus_SkipUpdate"], function(result){
+        const OutOfDate = result.PolyPlus_OutOfDate || false
+        const SkipUpdate = result.PolyPlus_SkipUpdate || null
+        const LiveVersion = result.PolyPlus_LiveVersion || Manifest.version
+        if (OutOfDate !== true && SkipUpdate !== LiveVersion) {
+            fetch('https://polyplus.vercel.app/data/version.json')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network not ok')
+                    }
+                    return response.json()
+                })
+                .then(data => {
+                    chrome.storage.local.set({'PolyPlus_LiveVersion': data.version}, function(){
+                        console.log('Cached live version')
+                    })
+                    if (data.version > Manifest.version) {
+                        chrome.storage.local.set({'PolyPlus_OutOfDate': true, 'PolyPlus_ReleaseNotes': data.releaseNotes}, function(){
+                            console.log('Cached update notifier result')
+                        });
+                        chrome.notifications.create("", {
+                            type: "basic",
+                            iconUrl: chrome.runtime.getURL("icon.png"),
+                            title: "New Update Available",
+                            message: "A new update is available for Poly+! (v" + data.version + ")"
+                        }, function(notificationID) {
+                            chrome.notifications.onClicked.addListener(function (id) {
+                                if (id === notificationID) {
+                                    chrome.tabs.create({url: 'https://github.com/IndexingGitHub/PolyPlus/releases', active: true})
+                                    chrome.notifications.clear(notificationID)
+                                }
+                            })
+                        })
+                        chrome.action.setBadgeBackgroundColor(
+                            {color: 'red'},
+                            () => { /* ... */ },
+                        );
+                    }
+                })
+                .catch(error => {console.log(error)})
+        }
+    });
+}
+chrome.contextMenus.create({
+    title: 'Run Update Notifier',
+    id: 'PolyPlus-RunUpdateNotifier',
+    contexts: ['all'],
+    documentUrlPatterns: [
+        "https://polytoria.com/*",
+        SettingsURL
+    ]
+});
 
 // COPY ASSET ID CONTEXT MENU ITEM REGISTRATION
 chrome.contextMenus.create({
     title: 'Copy Asset ID',
     id: 'PolyPlus-CopyID',
     contexts: ['link'],
-    documentUrlPatterns: ['https://polytoria.com/*'],
+    documentUrlPatterns: [
+        "https://polytoria.com/*",
+        SettingsURL
+    ],
     targetUrlPatterns: [
         "https://polytoria.com/places/**",
         "https://polytoria.com/users/**",
@@ -70,7 +102,10 @@ chrome.contextMenus.create({
     title: 'Copy Avatar Hash',
     id: 'PolyPlus-CopyAvatarHash',
     contexts: ['image'],
-    documentUrlPatterns: ['https://polytoria.com/*'],
+    documentUrlPatterns: [
+        "https://polytoria.com/*",
+        SettingsURL
+    ],
     targetUrlPatterns: [
         "https://c0.ptacdn.com/thumbnails/avatars/**",
         "https://c0.ptacdn.com/thumbnails/avatars/**"
@@ -100,6 +135,10 @@ chrome.contextMenus.onClicked.addListener(function (info, tab){
             })
             .then(() => console.log("Copied ID!"));
     }
+
+    if (info.menuItemId === 'PolyPlus-RunUpdateNotifier') {
+        RunUpdateNotifier()
+    }
 });
 
 /*

js/debug.js

@@ -60,6 +60,13 @@ document.querySelector('#main-content .container').innerHTML = `
             <button class="btn btn-secondary" id="clear-itemwishlist">Clear Item Wishlist</button>
         </div>
 
+        <label>Clear Specific Data Locations</label>
+        <p>Quickly clear specific locations of the extension's local data</p>
+        <div role="group" class="btn-group w-100 mb-3">
+            <button class="btn btn-secondary" id="delete-sync">Delete Sync Storage (primary, storage is backed up to Google account)</button>
+            <button class="btn btn-secondary" id="delete-local">Delete Local Storage (secondary, storage is only on local device)</button>
+        </div>
+
         <label style="color: red;">DANGER ZONE!</label>
         <p>This will clear all local data associated with the extension</p>
         <button class="btn btn-danger w-100" id="delete-all-data">Delete All Data</button>
@@ -166,9 +173,26 @@ document.getElementById('clear-itemwishlist').addEventListener('click', function
     });
 });
 
-document.getElementById('delete-all-data').addEventListener('click', function(){
+document.getElementById('delete-sync').addEventListener('click', function(){
-    if (confirm("Are you sure you'd like to delete all local data associated with the extension?") === false) { return }
+    if (confirm("Are you sure you'd like to delete all sync data associated with the extension?") === false) { return }
     chrome.storage.sync.clear(function() {
+        alert('Successfully deleted all sync data associated with the extension!')
+    });
+});
+
+document.getElementById('delete-local').addEventListener('click', function(){
+    if (confirm("Are you sure you'd like to delete all local data associated with the extension?") === false) { return }
+    chrome.storage.local.clear(function() {
+        alert('Successfully deleted all local data associated with the extension!')
+    });
+});
+
+document.getElementById('delete-all-data').addEventListener('click', function(){
+    if (confirm("Are you sure you'd like to delete all sync and local data associated with the extension?") === false) { return }
+    chrome.storage.sync.clear(function() {
+        alert('Successfully deleted all sync data associated with the extension!')
+    });
+    chrome.storage.local.clear(function() {
         alert('Successfully deleted all local data associated with the extension!')
     });
 });

js/everywhere.js

@@ -164,9 +164,9 @@ let Theme = null;
     }
   
     if (Settings.IRLPriceWithCurrencyOn && Settings.IRLPriceWithCurrencyOn === true) {
-      const IRL = await Utilities.CalculateIRL(UserData.Bricks, Settings.IRLPriceWithCurrencyCurrency)
+      const IRLResult = await Utilities.CalculateIRL(UserData.Bricks, Settings.IRLPriceWithCurrencyCurrency)
       const BrickBalanceCount = [document.querySelector('.text-success .brickBalanceCount'), document.querySelector('.text-success .brickBalanceCont')]
-      BrickBalanceCount.forEach(element => {element.innerText = element.innerText + ` ($${IRL.bricks} ${IRL.display})`});
+      BrickBalanceCount.forEach(element => {element.innerText = element.innerText + ` ($${IRLResult.result} ${IRLResult.display})`});
     }
   
     if (Settings.HideNotifBadgesOn && Settings.HideNotifBadgesOn === true) {

js/places/place-view.js

@@ -382,12 +382,12 @@ async function IRLPrice() {
     const Gamepasses = document.querySelector('#gamepasses-tabpane .row.flex-row').children
     for (let gamepass of Gamepasses) {
         const Price = gamepass.getElementsByClassName('text-success')[0]
-        const Result = await Utilities.CalculateIRL(Price.innerText, Settings.IRLPriceWithCurrencyCurrency)
+        const IRLResult = await Utilities.CalculateIRL(Price.innerText, Settings.IRLPriceWithCurrencyCurrency)
 
         let Span = document.createElement('span')
         Span.classList = 'text-muted polyplus-price-tag'
         Span.style.fontSize = '0.7rem'
-        Span.innerText = "($" + Result.bricks + " " + Result.display + ")"
+        Span.innerText = "($" + IRLResult.result + " " + IRLResult.display + ")"
         Price.appendChild(Span)
     }
 }

js/resources/utils.js

@@ -7,6 +7,13 @@ HOW TO USE IN CONTENT SCRIPTS:
 })();
 */
 
+function ParseFullNumber(ab) {
+  if (typeof(ab) === "number") { return ab }
+  const Suffixes = {"k": 1000, "m": 1000000, "b": 1000000000}
+  const Suffix = ab.slice(-1).toLowerCase();
+  if (Suffixes[Suffix]) {return parseFloat(ab)*Suffixes[Suffix]} else {return parseFloat(ab)}
+}
+
 export default {
   DefaultSettings: {
     PinnedGamesOn: true,
@@ -60,50 +67,76 @@ export default {
   },
   CalculateIRL: async function(bricks, to, brickPackage) {
     /*
+    Disabled for now: currency retrieval from currencies.json
+
     const response = await fetch(chrome.runtime.getURL('/js/resources/currencies.json'))
     if (!response.ok) {
       throw new Error('Getting currency data failure')
     }
     const data = await response.json()
+    const UnitPrice = data.Data[brickPackage][to]
     */
 
-    let IRL;
+    let Result = "N/A";
-    let DISPLAY;
+    let Display = "Currency Not Found";
-    //const UnitPrice = data.Data[brickPackage][to]
+
+    bricks = ParseFullNumber(bricks.replace(/,/g, ''))
+    console.log(bricks)
     switch (to) {
+      // U.S. Dollar
       case 0:
-        IRL = (bricks.replace(/,/g, '') * 0.0099).toFixed(2)
+        Result = (bricks * 0.0099).toFixed(2)
-        DISPLAY = 'USD'
+        Display = "USD"
         break
+
+      // Euro
       case 1:
-        IRL = (bricks.replace(/,/g, '') * 0.009).toFixed(2)
+        Result = (bricks.replace(/,/g, '') * 0.009).toFixed(2)
-        DISPLAY = 'EUR'
+        Display = "EUR"
         break
+
+      // Canadian Dollar
       case 2:
-        IRL = (bricks.replace(/,/g, '') * 0.0131).toFixed(2)
+        Result = (bricks.replace(/,/g, '') * 0.0131).toFixed(2)
-        DISPLAY = 'CAD'
+        Display = "CAD"
         break
+
+      // Great British Pound
       case 3:
-        IRL = (bricks.replace(/,/g, '') * 0.0077).toFixed(2)
+        Result = (bricks.replace(/,/g, '') * 0.0077).toFixed(2)
-        DISPLAY = 'GBP'
+        Display = "GBP"
         break
+
+      // Mexican Peso
       case 4:
-        IRL = (bricks.replace(/,/g, '') * 0.1691).toFixed(2)
+        Result = (bricks.replace(/,/g, '') * 0.1691).toFixed(2)
-        DISPLAY = 'MXN'
+        Display = "MXN"
         break
+
+      // Australia Dollar
       case 5:
-        IRL = (bricks.replace(/,/g, '') * 0.0144).toFixed(2)
+        Result = (bricks.replace(/,/g, '') * 0.0144).toFixed(2)
-        DISPLAY = 'AUD'
+        Display = "AUD"
         break
+
+      // Turkish Lira
       case 6:
-        IRL = (bricks.replace(/,/g, '') *  0.2338).toFixed(2)
+        Result = (bricks.replace(/,/g, '') *  0.2338).toFixed(2)
-        DISPLAY = 'TRY'
+        Display = "TRY"
         break
+
+      // Brazillian Real
       case 7:
-        IRL = (bricks.replace(/,/g, '') * 0.49).toFixed(2)
+        Result = (bricks.replace(/,/g, '') * 0.49).toFixed(2)
-        DISPLAY = 'BRL'
+        Display = "BRL"
         break
     }
-    return {bricks: IRL, display: DISPLAY}
+
+    if (typeof(Result) === "number") { Result = Result.toFixed(2) }
+
+    return {
+      result: Result,
+      display: Display
+    }
   }
 }

js/store/item-view.js

@@ -67,8 +67,8 @@ async function IRLPrice() {
     Span.classList = 'text-muted polyplus-own-tag'
     Span.style.fontSize = '0.7rem'
     Span.style.fontWeight = 'normal'
-    const Result = await Utilities.CalculateIRL(Price, Settings.IRLPriceWithCurrencyCurrency)
+    const IRLResult = await Utilities.CalculateIRL(Price, Settings.IRLPriceWithCurrencyCurrency)
-    Span.innerText = "($" + Result.bricks + " " + Result.display + ")"
+    Span.innerText = "($" + IRLResult.result + " " + IRLResult.display + ")"
     PurchaseBtn.appendChild(Span)
   }
 }

js/store/store.js

@@ -75,8 +75,8 @@ async function LoadIRLPrices(element) {
     Span.classList = 'text-muted polyplus-price-tag'
     Span.style.fontSize = '0.7rem'
     const Price = Parent.innerText.split(' ')[1]
-    const Result = await Utilities.CalculateIRL(Price, Settings.IRLPriceWithCurrencyCurrency)
+    const IRLResult = await Utilities.CalculateIRL(Price, Settings.IRLPriceWithCurrencyCurrency)
-    Span.innerText = "($" + Result.bricks + " " + Result.display + ")"
+    Span.innerText = "($" + IRLResult.result + " " + IRLResult.display + ")"
     Parent.appendChild(Span)
 }
 

manifest.json

@@ -15,7 +15,7 @@
 
         {
             "matches": ["https://polytoria.com/my/settings/*"],
-            "js": ["/js/polyplus-settings.js"],
+            "js": ["/js/settings.js"],
             "run_at": "document_start"
         },
 

settings.html

@@ -8,7 +8,7 @@
     <title>Poly+ Settings</title>
  
     <!-- RESOURCES -->
-    <link rel="stylesheet" href="https://c0.ptacdn.com/static/app.64aa42f6.css">
+    <link rel="stylesheet" href="css/polytoria.css">
   </head>
   <body data-bs-theme="dark">
     <style>
@@ -246,8 +246,11 @@
           </div>
         </div>
   
-        <button class="btn btn-success" data-setting="[save]">Save</button>
+        <div role="group" class="btn-group w-100">
-        <button class="btn btn-secondary" data-setting="[cancel]">Cancel</button>
+          <button class="btn btn-success w-25" data-setting="[save]">Save</button>
+          <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
+          <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
+        </div>
       </div>
     </dialog>
     <dialog class="w-50" id="ModifyNav-Modal" data-setting="ModifyNav">
@@ -261,55 +264,58 @@
           <div class="card-header">#1 Navbar Item</div>
           <div class="card-body">
             <label>Label</label>
-            <input id="ModifyNav-Modal-1Label" class="form-control bg-dark mb-2" placeholder="Play" data-parent="0" data-setting="Label">
+            <input class="form-control bg-dark mb-2" placeholder="Play" data-parent="0" data-setting="Label">
   
             <label>Link</label>
-            <input id="ModifyNav-Modal-1Link" class="form-control bg-dark mb-2" placeholder="https://polytoria.com/places/" data-parent="0" data-setting="Link">
+            <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/places/" data-parent="0" data-setting="Link">
           </div>
         </div>
         <div class="card mb-2">
           <div class="card-header">#2 Navbar Item</div>
           <div class="card-body">
             <label>Label</label>
-            <input id="ModifyNav-Modal-2Label" class="form-control bg-dark mb-2" placeholder="Store" data-parent="1" data-setting="Label">
+            <input class="form-control bg-dark mb-2" placeholder="Store" data-parent="1" data-setting="Label">
   
             <label>Link</label>
-            <input id="ModifyNav-Modal-2Link" class="form-control bg-dark mb-2" placeholder="https://polytoria.com/store/" data-parent="1" data-setting="Link">
+            <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/store/" data-parent="1" data-setting="Link">
           </div>
         </div>
         <div class="card mb-2">
           <div class="card-header">#3 Navbar Item</div>
           <div class="card-body">
             <label>Label</label>
-            <input id="ModifyNav-Modal-3Label" class="form-control bg-dark mb-2" placeholder="Guilds" data-parent="2" data-setting="Label">
+            <input class="form-control bg-dark mb-2" placeholder="Guilds" data-parent="2" data-setting="Label">
   
             <label>Link</label>
-            <input id="ModifyNav-Modal-3Link" class="form-control bg-dark mb-2" placeholder="https://polytoria.com/guilds/" data-parent="2" data-setting="Link">
+            <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/guilds/" data-parent="2" data-setting="Link">
           </div>
         </div>
         <div class="card mb-2">
           <div class="card-header">#4 Navbar Item</div>
           <div class="card-body">
             <label>Label</label>
-            <input id="ModifyNav-Modal-4Label" class="form-control bg-dark mb-2" placeholder="People" data-parent="3" data-setting="Label">
+            <input class="form-control bg-dark mb-2" placeholder="People" data-parent="3" data-setting="Label">
   
             <label>Link</label>
-            <input id="ModifyNav-Modal-4Link" class="form-control bg-dark mb-2" placeholder="https://polytoria.com/users/" data-parent="3" data-setting="Link">
+            <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/users/" data-parent="3" data-setting="Link">
           </div>
         </div>
         <div class="card mb-2">
           <div class="card-header">#5 Navbar Item</div>
           <div class="card-body">
             <label>Label</label>
-            <input id="ModifyNav-Modal-5Label" class="form-control bg-dark mb-2" placeholder="Forum" data-parent="4" data-setting="Label">
+            <input class="form-control bg-dark mb-2" placeholder="Forum" data-parent="4" data-setting="Label">
   
             <label>Link</label>
-            <input id="ModifyNav-Modal-5Link" class="form-control bg-dark mb-2" placeholder="https://polytoria.com/forum" data-parent="4" data-setting="Link">
+            <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/forum" data-parent="4" data-setting="Link">
           </div>
         </div>
-  
+
-        <button id="ModifyNav-Modal-Save" class="btn btn-success" data-setting="[save]">Save</button>
+        <div role="group" class="btn-group w-100">
-        <button id="ModifyNav-Modal-Save" class="btn btn-secondary" data-setting="[cancel]">Cancel</button>
+          <button class="btn btn-success w-25" data-setting="[save]">Save</button>
+          <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
+          <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
+        </div>
       </div>
     </dialog>
     <div id="page">
@@ -366,7 +372,7 @@
         <span class="desc mb-4">
           See the real life currency value along with Bricks across the site!
           <br>
-          <span style="font-size: 0.8rem; color: orange;">* Currencies were calculated on [DATE].</span>
+          <span style="font-size: 0.8rem; color: orange;">* Currencies were calculated on <span id="IRLPriceWithCurrency-Date">[DATE]</span>.</span>
           <br>
           <span style="font-size: 0.8rem; color: orange;">* Currencies other than USD are purely approximations.</span>
         </span>

settings.js

@@ -96,6 +96,12 @@ Elements.forEach(element => {
                 LoadCurrent();
                 Modal.close();
               }, 400)
+            } else if (Setting === '[reset-default]') {
+              if (confirm("Are you sure you'd like to reset these options to their defaults?") === true) {
+                Settings[Modal.getAttribute('data-setting')] = ExpectedSettings[Modal.getAttribute('data-setting')]
+                Save()
+                Modal.close();
+              }
             } else if (Setting === '[cancel]') {
               Modal.close();
             } else {
@@ -164,24 +170,15 @@ function LoadCurrent() {
   chrome.storage.sync.get(["PolyPlus_Settings"], function(result) {
     Settings = MergeObjects(result.PolyPlus_Settings || ExpectedSettings, ExpectedSettings)
 
-    console.log("Current:", Settings)
+    console.log("Current: ", Settings)
 
     Elements.forEach(element => {
-      /*
-      let Status = element.getElementsByClassName('status')[0]
-      if (Status !== undefined) {
-        Status.innerText = FormatBool(Settings[element.getElementsByTagName('button')[0].getAttribute('data-setting')])
-      }
-      */
-      console.log(Settings)
       const ToggleBtn = element.getElementsByClassName('toggle-btn')[0]
       if (Settings[ToggleBtn.getAttribute('data-setting')] === true) {
-        console.log(ToggleBtn.parentElement, 'enabled', Settings[ToggleBtn.getAttribute('data-setting')])
         element.classList.add('enabled')
         ToggleBtn.innerText = 'Disable'
         ToggleBtn.classList.add('btn-danger')
       } else {
-        console.log(ToggleBtn.parentElement, 'disabled', Settings[ToggleBtn.getAttribute('data-setting')])
         element.classList.add('disabled')
         ToggleBtn.innerText = 'Enable'
         ToggleBtn.classList.add('btn-success')
@@ -254,13 +251,6 @@ CopyThemeJSONBtn.addEventListener('click', function(){
   }
 });
 
-let CurrencyDate = 
-LoadFile(chrome.runtime.getURL('js/resources/currencies.json'), function(text){
-  CurrencyDate = new Date(JSON.parse(text).Date).toLocaleDateString("en-US", {day:"numeric",month:"long",year:"numeric"})
-
-  document.getElementById('IRLPriceWithCurrencyCurrency').previousElementSibling.children[1].innerText = document.getElementById('IRLPriceWithCurrencyCurrency').previousElementSibling.children[1].innerText.replace('[DATE]', CurrencyDate)
-})
-
 function LoadThemeJSON(string) {
   try {
     let JSONTable = JSON.parse(string)
@@ -310,13 +300,6 @@ function FormatBool(bool){
   else { return 'disabled' }
 }
 
-function LoadFile(path, callback) {
-  var xhr = new XMLHttpRequest();
-  xhr.onload = function () { return callback(this.responseText); }
-  xhr.open("GET", path, true);
-  xhr.send();
-}
-
 const Manifest = chrome.runtime.getManifest()
 let BuildType = "Stable"
 if (Manifest.version_name !== undefined) {BuildType = "Pre-Release"}
@@ -347,4 +330,47 @@ function CheckForUpdates() {
     })
     .catch(error => {console.log(error)});
 }
-CheckForUpdatesButton.addEventListener('click', CheckForUpdates)
+CheckForUpdatesButton.addEventListener('click', CheckForUpdates)
+
+fetch(chrome.runtime.getURL('/js/resources/currencies.json'))
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network not ok')
+    }
+    return response.json()
+  })
+  .then(data => {
+    const DateText = new Date(data.Date).toLocaleDateString("en-US", {day:"numeric",month:"long",year:"numeric"})
+    document.getElementById('IRLPriceWithCurrency-Date').innerText = DateText
+  })
+  .catch(error => {console.log(error)})
+
+chrome.storage.local.get(['PolyPlus_OutOfDate', 'PolyPlus_LiveVersion', 'PolyPlus_ReleaseNotes', 'PolyPlus_SkipUpdate'], function(result) {
+  const OutOfDate = result.PolyPlus_OutOfDate || false
+  const SkipUpdate = result.PolyPlus_SkipUpdate || null
+  const LiveVersion = result.PolyPlus_LiveVersion || Manifest.version
+  if (OutOfDate === true && SkipUpdate !== LiveVersion) {
+    const Banner = document.createElement('div')
+    Banner.classList = 'alert position-sticky p-3'
+    Banner.style = 'top: 30px; box-shadow: 0 0 20px 2px #000; z-index: 2000; background: rgb(163 39 39);'
+    Banner.innerHTML = `
+    <b>New Update Available!</b>
+    <br>
+    Your Poly+ installation is out of date! If you would like to get the latest and greatest features, improvements, and bug fixes click on one of the links below to dismiss this banner!
+    <br>
+    <div role="group" class="btn-group w-100 mt-2">
+      <a href="${result.PolyPlus_ReleaseNotes}" class="btn btn-primary btn-sm w-25" target="_blank">Go to Release Notes</a>
+      <button id="skip-this-update" class="btn btn-warning btn-sm w-25">(Not Recommended) Skip this Update</button>
+    </div>
+    `
+    document.getElementById('page').insertBefore(Banner, document.getElementById('page').children[1])
+
+    const SkipButton = document.getElementById('skip-this-update')
+    SkipButton.addEventListener('click', function(){
+      Banner.remove()
+      chrome.storage.local.set({'PolyPlus_SkipUpdate': result.PolyPlus_LiveVersion}, function(){
+        console.log('set skip update to live version: ', result.PolyPlus_LiveVersion)
+      })
+    });
+  }
+})