Display update label on open option page when updating

simple-translate/background.js

@@ -8,7 +8,7 @@ browser.runtime.onInstalled.addListener((details) => {
     if (details.reason != 'install' && details.reason != 'update') return;
 
     browser.tabs.create({
-        url: "options/options.html#information",
+        url: "options/options.html#information?action=updated",
         active: false
     });
 });

simple-translate/options/options.css

@@ -163,6 +163,16 @@ hr {
     margin-left: 5px;
 }
 
+.updated p:nth-child(1)::after {
+    content: "Updated";
+    color: var(--new);
+    font-size: 14px;
+    border: 1px solid var(--new);
+    border-radius: 2px;
+    padding: 0px 5px;
+    margin-left: 5px;
+}
+
 .optionForm {
     flex-basis: 150px;
     display: flex;

simple-translate/options/ui.js

@@ -18,7 +18,7 @@ tm.HashObserver.enable();
 document.addEventListener("changehash", readHash, false);
 
 function readHash(e) {
-    hash = e.hash.split('&')[0];
+    const hash = e.hash.split('?')[0];
 
     let selected = document.getElementsByClassName("selected");
     selected[0].classList.remove("selected");
@@ -40,6 +40,28 @@ function readHash(e) {
             document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
             break;
     }
+
+    const params = getParams(e.hash);
+    switch (params.action) {
+        case 'updated':
+            showUpdated();
+            break;
+    }
+}
+
+function getParams(hash) {
+    let params = {};
+    if (hash.split('?')[1] == undefined) return params;
+    hash = hash.split('?')[1].split('&');
+    for (let i of hash) {
+        params[i.split('=')[0]] = i.split('=')[1];
+    }
+    return params;
+}
+
+function showUpdated() {
+    const version = document.getElementsByClassName('addonVersion')[0];
+    version.classList.add('updated');
 }
 
 document.getElementsByClassName("addonUrl")[0].href = browser.i18n.getMessage("addonUrl");