Merge pull request #58 from SethBurkart123/migration

add initial bugfixes from HyperSEQTA + other bugfixes

package.json

@@ -11,7 +11,7 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",

public/manifest.json

@@ -25,8 +25,8 @@
   "optional_permissions": ["declarativeContent"],
   "content_scripts": [
     {
-      "matches": ["https://*/*"],
+      "matches": ["*://*/*"],
-      "js": ["purify.min.js", "SEQTA.js"],
+      "js": ["browser-polyfill.js", "purify.min.js", "SEQTA.js"],
       "run_at": "document_start"
     }
   ],

src/SEQTA.js

@@ -1,4 +1,5 @@
-/* global chrome */
+/* eslint-disable no-inner-declarations */
+import browser from 'webextension-polyfill'
 import { animate, spring, stagger } from 'motion';
 import Color from 'color';
 import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
@@ -7,6 +8,8 @@ import ShortcutLinks from './seqta/content/links.json';
 import MenuitemSVGKey from './seqta/content/MenuItemSVGKey.json';
 import stringToHTML from './seqta/utils/stringToHTML.js';
 import loading, { AppendLoadingSymbol } from './seqta/ui/Loading.js';
+import { response } from './seqta/utils/GetPrefs.js';
+import { onError } from './seqta/utils/onError.js';
 
 // Icons
 import assessmentsicon from './seqta/icons/assessmentsIcon.js';
@@ -44,16 +47,15 @@ document.addEventListener(
       IsSEQTAPage = true;
       console.log('[BetterSEQTA+] Verified SEQTA Page');
 
-      let link = document.createElement('link');
+      const link = GetCSSElement('css/documentload.css');
-      link.href = chrome.runtime.getURL('css/documentload.css');
-      link.type = 'text/css';
-      link.rel = 'stylesheet';
       document.getElementsByTagName('html')[0].appendChild(link);
 
       enableCurrentTheme();
-      chrome.storage.local.get(null, function (items) {
+      const result = browser.storage.local.get()
+      function open (items) {
         main(items);
-      });
+      }
+      result.then(open, onError)
     }
     if (
       !document.childNodes[1].textContent?.includes('SEQTA') &&
@@ -84,7 +86,8 @@ function animbkEnable(item) {
 
 export function ApplyCSSToHiddenMenuItems() {
   var stylesheetInnerText = '';
-  chrome.storage.local.get(null, function (result) {
+  const result = browser.storage.local.get()
+  function open (result) {
     for (let i = 0; i < Object.keys(result.menuitems).length; i++) {
       if (!Object.values(result.menuitems)[i].toggle) {
         stylesheetInnerText += SetDisplayNone(Object.keys(result.menuitems)[i]);
@@ -98,7 +101,8 @@ export function ApplyCSSToHiddenMenuItems() {
     let MenuItemStyle = document.createElement('style');
     MenuItemStyle.innerText = stylesheetInnerText;
     document.head.appendChild(MenuItemStyle);
-  });
+  }
+  result.then(open, onError)
 }
 
 function OpenWhatsNewPopup() {
@@ -111,14 +115,14 @@ function OpenWhatsNewPopup() {
 
   var header = stringToHTML(`<div class="whatsnewHeader">
   <h1>What's New</h1>
-  <p>BetterSEQTA+ V${chrome.runtime.getManifest().version}</p>
+  <p>BetterSEQTA+ V${browser.runtime.getManifest().version}</p>
   </div>`).firstChild;
 
   let imagecont = document.createElement('div');
   imagecont.classList.add('whatsnewImgContainer');
   let video = document.createElement('video');
   let source = document.createElement('source');
-  source.setAttribute('src', chrome.runtime.getURL('resources/update-video.mp4'));
+  source.setAttribute('src', browser.runtime.getURL('resources/update-video.mp4'));
   source.setAttribute('type', 'video/mp4');
   video.autoplay = true;
   video.muted = true;
@@ -258,7 +262,7 @@ function OpenWhatsNewPopup() {
     }
   );
 
-  chrome.storage.local.remove(['justupdated']);
+  browser.storage.local.remove(['justupdated']);
 
   bkelement.addEventListener('click', function (event) {
     // Check if the click event originated from the element itself and not any of its children
@@ -283,11 +287,13 @@ async function finishLoad() {
     console.log(err);
   }
 
-  chrome.storage.local.get(['justupdated'], function (result) {
+  const result = browser.storage.local.get(['justupdated']);
+  function open (result) {
     if (result.justupdated && !document.getElementById('whatsnewbk')) {
       OpenWhatsNewPopup();
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 async function DeleteWhatsNew() {
@@ -366,25 +372,41 @@ async function RunColourCheck(element) {
   }
 }
 
-export function GetiFrameCSSElement() {
+export function GetCSSElement (file) {
-  var cssFile = chrome.runtime.getURL('css/iframe.css');
+  const cssFile = browser.runtime.getURL(file)
-  var fileref = document.createElement('link');
+  const fileref = document.createElement('link')
-  fileref.setAttribute('rel', 'stylesheet');
+  fileref.setAttribute('rel', 'stylesheet')
-  fileref.setAttribute('type', 'text/css');
+  fileref.setAttribute('type', 'text/css')
-  fileref.setAttribute('href', cssFile);
+  fileref.setAttribute('href', cssFile)
 
-  return fileref;
+  return fileref
+}
+
+function removeThemeTagsFromNotices () {
+  // Grabs an array of the notice iFrames
+  const userHTMLArray = document.getElementsByClassName('userHTML')
+  // Iterates through the array, applying the iFrame css
+  for (const item of userHTMLArray) {
+    // Grabs the HTML of the body tag
+    const body = item.contentWindow.document.querySelectorAll('body')[0]
+    if (body) {
+    // Replaces the theme tag with nothing
+      const bodyText = body.innerHTML
+      body.innerhtml = bodyText.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, '').replace(/ +/, ' ')
+    }
+  }
 }
 
 function CheckiFrameItems() {
   // Injecting CSS File to the webpage to overwrite iFrame default CSS
-  let fileref = GetiFrameCSSElement();
+  let fileref = GetCSSElement('css/iframe.css');
 
   const observer = new MutationObserver(function (mutations_list) {
     mutations_list.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (added_node) {
         if (added_node.tagName == 'IFRAME') {
-          chrome.storage.local.get(['DarkMode'], function (result) {
+          const result = browser.storage.local.get('DarkMode');
+          function open (result) {
             DarkMode = result.DarkMode;
             if (DarkMode) {
               RunColourCheck(added_node);
@@ -423,7 +445,8 @@ function CheckiFrameItems() {
                 }
               });
             }
-          });
+          }
+          result.then(open, onError)
         }
       });
     });
@@ -465,23 +488,27 @@ async function LoadPageElements() {
   await AddBetterSEQTAElements(true);
   var sublink = window.location.href.split('/')[4];
   switch (sublink) {
-  case 'news':
+  case 'news': {
     console.log('[BetterSEQTA+] Started Init');
-    chrome.storage.local.get(null, function (result) {
+    const result = browser.storage.local.get()
+    function open (result) {
       if (result.onoff) {
         SendNewsPage();
 
         // Sends similar HTTP Post Request for the notices
-        chrome.storage.local.get(null, function (result) {
+        const result = browser.storage.local.get() 
+        function open (result) {
           if (result.notificationcollector) {
             enableNotificationCollector();
           }
-        });
+        }
+        result.then(open, onError)
         finishLoad();
       }
-    });
+    }
+    result.then(open, onError)
     break;
-
+  }
   case 'home':
     window.location.replace(`${location.origin}/#?page=/home`);
     LoadInit();
@@ -490,17 +517,20 @@ async function LoadPageElements() {
     window.location.replace(`${location.origin}/#?page=/home`);
     LoadInit();
     break;
-  default:
+  default: {
     finishLoad();
 
     // Sends similar HTTP Post Request for the notices
-    chrome.storage.local.get(null, function (result) {
+    const result1 = browser.storage.local.get()
+    function open1(result) {
       if (result.notificationcollector) {
         enableNotificationCollector();
       }
-    });
+    }
+    result1.then(open1, onError)
     break;
   }
+}
 
   const observer = new MutationObserver(function (mutations_list) {
     mutations_list.forEach(function (mutation) {
@@ -584,7 +614,8 @@ function CheckNoticeTextColour(notice) {
   const observer = new MutationObserver(function (mutations_list) {
     mutations_list.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (added_node) {
-        chrome.storage.local.get(['DarkMode'], function (result) {
+        const result = browser.storage.local.get(['DarkMode']) 
+        function open (result) {
           DarkMode = result.DarkMode;
           if (added_node.classList.contains('notice')) {
             var hex = added_node.style.cssText.split(' ')[1];
@@ -593,7 +624,8 @@ function CheckNoticeTextColour(notice) {
               added_node.style.cssText = '--color: undefined;';
             }
           }
-        });
+        }
+        result.then(open, onError)
       });
     });
   });
@@ -626,9 +658,13 @@ export function tryLoad() {
     'load',
     function () {
       CheckiFrameItems();
+      removeThemeTagsFromNotices();
+      documentTextColor();
     },
     true,
   );
+  const observer = new MutationObserver(() => { documentTextColor() })
+  observer.observe(document.getElementById('toolbar'), { attributes: true, childList: true, subtree: true })
 }
 
 function ChangeMenuItemPositions(storage) {
@@ -660,7 +696,8 @@ function ChangeMenuItemPositions(storage) {
 }
 
 export async function ObserveMenuItemPosition() {
-  chrome.storage.local.get(null, function (result) {
+  const result = browser.storage.local.get()
+  function open (result) {
     let menuorder = result.menuorder;
     if (menuorder && result.onoff) {
       const observer = new MutationObserver(function (mutations_list) {
@@ -684,7 +721,8 @@ export async function ObserveMenuItemPosition() {
         childList: true,
       });
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 function main(storedSetting) {
@@ -693,7 +731,7 @@ function main(storedSetting) {
 
   // Handle undefined onoff setting
   if (typeof onoff === 'undefined') {
-    chrome.runtime.sendMessage({ type: 'setDefaultStorage' });
+    browser.runtime.sendMessage({ type: 'setDefaultStorage' });
   }
 
   const initialize = () => {
@@ -727,17 +765,13 @@ function main(storedSetting) {
 }
 
 function InjectStyles() {
-  var cssFile = chrome.runtime.getURL('css/injected.css');
+  const inject = GetCSSElement('css/injected.css');
-  var fileref = document.createElement('link');
+  document.head.appendChild(inject);
-  fileref.setAttribute('rel', 'stylesheet');
+  document.getElementsByTagName('html')[0].appendChild(inject);
-  fileref.setAttribute('type', 'text/css');
-  fileref.setAttribute('href', cssFile);
-  document.head.appendChild(fileref);
-  document.getElementsByTagName('html')[0].appendChild(fileref);
 }
 
 function InjectCustomIcons() {
-  const fontURL = chrome.runtime.getURL('fonts/IconFamily.woff');
+  const fontURL = browser.runtime.getURL('fonts/IconFamily.woff');
 
   const style = document.createElement('style');
   style.setAttribute('type', 'text/css');
@@ -820,10 +854,7 @@ export function closeSettings() {
 }
 
 function addExtensionSettings() {
-  const link = document.createElement('link');
+  const link = GetCSSElement('interface/popup.css');
-  link.href = chrome.runtime.getURL('interface/popup.css');
-  link.type = 'text/css';
-  link.rel = 'stylesheet';
   document.querySelector('html').appendChild(link);
 
   const extensionPopup = document.createElement('div');
@@ -832,7 +863,7 @@ function addExtensionSettings() {
   document.body.appendChild(extensionPopup);
 
   const extensionIframe = document.createElement('iframe');
-  extensionIframe.src = `${chrome.runtime.getURL('interface/index.html')}#settings/embedded`;
+  extensionIframe.src = `${browser.runtime.getURL('interface/index.html')}#settings/embedded`;
   extensionIframe.id = 'ExtensionIframe';
   extensionIframe.allowTransparency = true;
   extensionIframe.style.width = '384px';
@@ -863,7 +894,7 @@ function addExtensionSettings() {
 
 function saveNewOrder(sortable) {
   var order = sortable.toArray();
-  chrome.storage.local.set({ menuorder: order });
+  browser.storage.local.set({ menuorder: order });
 }
 
 function cloneAttributes(target, source) {
@@ -873,7 +904,8 @@ function cloneAttributes(target, source) {
 }
 
 export function OpenMenuOptions() {
-  chrome.storage.local.get(null, function (result) {
+  const result = browser.storage.local.get()
+  function open (result) {
     var container = document.getElementById('container');
     var menu = document.getElementById('menu');
 
@@ -883,7 +915,7 @@ export function OpenMenuOptions() {
       for (let i = 0; i < childnodes.length; i++) {
         const element = childnodes[i];
         newdefaultmenuorder.push(element.dataset.key);
-        chrome.storage.local.set({ defaultmenuorder: newdefaultmenuorder });
+        browser.storage.local.set({ defaultmenuorder: newdefaultmenuorder });
       }
     }
     let childnodes = menu.firstChild.childNodes;
@@ -893,7 +925,7 @@ export function OpenMenuOptions() {
         if (!result.defaultmenuorder.indexOf(element.dataset.key)) {
           let newdefaultmenuorder = result.defaultmenuorder;
           newdefaultmenuorder.push(element.dataset.key);
-          chrome.storage.local.set({ defaultmenuorder: newdefaultmenuorder });
+          browser.storage.local.set({ defaultmenuorder: newdefaultmenuorder });
         }
       }
     }
@@ -955,11 +987,12 @@ export function OpenMenuOptions() {
         element.toggle = true;
         menuItems[id] = element;
       }
-      chrome.storage.local.set({ menuitems: menuItems });
+      browser.storage.local.set({ menuitems: menuItems });
     }
 
     var menubuttons = document.getElementsByClassName('menuitem');
-    chrome.storage.local.get(['menuitems'], function (result) {
+    const result1 = browser.storage.local.get(['menuitems'])
+    function open (result) {
       var menuItems = result.menuitems;
       let buttons = document.getElementsByClassName('menuitem');
       for (var i = 0; i < buttons.length; i++) {
@@ -971,7 +1004,8 @@ export function OpenMenuOptions() {
           buttons[i].checked = true;
         }
       }
-    });
+    }
+    result1.then(open, onError);
 
     Sortable.mount(new AutoScroll());
 
@@ -1044,9 +1078,10 @@ export function OpenMenuOptions() {
     savebutton.addEventListener('click', closeAll);
 
     defaultbutton.addEventListener('click', function () {
-      chrome.storage.local.get(null, function (response) {
+      const result = browser.storage.local.get()
+      function open (response) {
         const options = response.defaultmenuorder;
-        chrome.storage.local.set({ menuorder: options });
+        browser.storage.local.set({ menuorder: options });
         ChangeMenuItemPositions(options);
 
         for (let i = 0; i < menubuttons.length; i++) {
@@ -1059,9 +1094,11 @@ export function OpenMenuOptions() {
           );
         }
         StoreMenuSettings();
+      }
+      result.then(open, onError)
     });
-    });
+  }
-  });
+  result.then(open, onError)
 }
 
 function ReplaceMenuSVG(element, svg) {
@@ -1082,7 +1119,7 @@ async function AddBetterSEQTAElements(toggle) {
   if (code != null) {
     if (!code.innerHTML.includes('BetterSEQTA')) {
       UserInitalCode = code.innerText;
-      code.innerText = `BetterSEQTA v${chrome.runtime.getManifest().version}`;
+      code.innerText = `BetterSEQTA v${browser.runtime.getManifest().version}`;
       code.setAttribute('data-hover', 'Click for user code');
       code.addEventListener('click', function () {
         var code = document.getElementsByClassName('code')[0];
@@ -1091,7 +1128,7 @@ async function AddBetterSEQTAElements(toggle) {
           code.setAttribute('data-hover', 'Click for BetterSEQTA version');
         } else {
           code.innerText = `BetterSEQTA v${
-            chrome.runtime.getManifest().version
+            browser.runtime.getManifest().version
           }`;
           code.setAttribute('data-hover', 'Click for user code');
         }
@@ -1099,16 +1136,18 @@ async function AddBetterSEQTAElements(toggle) {
       if (toggle) {
         // Creates Home menu button and appends it as the first child of the list
 
-        const result = chrome.storage.local.get(['animatedbk']);
+        const result = browser.storage.local.get(['animatedbk']);
-        const sliderVal = chrome.storage.local.get(['bksliderinput']);
+        const sliderVal = browser.storage.local.get(['bksliderinput']);
 
         result.then(animbkEnable);
         sliderVal.then(updateBgDurations);
 
         // Load darkmode state
-        chrome.storage.local.get(['DarkMode'], function (result) {
+        const result1 = browser.storage.local.get(['DarkMode'])
+        function open (result) {
           DarkMode = result.DarkMode;
-        });
+        }
+        result1.then(open, onError)
 
         var titlebar = document.createElement('div');
         titlebar.classList.add('titlebar');
@@ -1258,7 +1297,8 @@ async function AddBetterSEQTAElements(toggle) {
         ContentDiv.append(SettingsButton.firstChild);
 
         const result = await new Promise(resolve => {
-          chrome.storage.local.get(null, resolve);
+          const result = browser.storage.local.get();
+          result.then(resolve, onError)
         });
         
         const DarkMode = result.DarkMode;
@@ -1279,11 +1319,12 @@ async function AddBetterSEQTAElements(toggle) {
 
         document.getElementById('LightDarkModeButton').addEventListener('click', async () => {
           const result = await new Promise(resolve => {
-            chrome.storage.local.get(null, resolve);
+            const result = browser.storage.local.get();
+            result.then(resolve, onError)
           });
           
           const newDarkMode = !result.DarkMode;
-          chrome.storage.local.set({ DarkMode: newDarkMode });
+          browser.storage.local.set({ DarkMode: newDarkMode });
           
           updateAllColors(newDarkMode, result.selectedColor);
           
@@ -1399,7 +1440,8 @@ function CheckCurrentLesson(lesson, num) {
 
   // If 5 minutes before the start of another lesson:
   if (minutes == 5) {
-    chrome.storage.local.get('lessonalert', function (result) {
+    const result = browser.storage.local.get('lessonalert')
+    function open (result) {
       if (result.lessonalert) {
         // Checks if notifications are supported
         if (!window.Notification) {
@@ -1441,7 +1483,8 @@ function CheckCurrentLesson(lesson, num) {
           }
         }
       }
-    });
+    }
+    result.then(open, onError)
   }
 }
 
@@ -1630,7 +1673,7 @@ function callHomeTimetable(date, change) {
           var dummyDay = document.createElement('div');
           dummyDay.classList.add('day-empty');
           let img = document.createElement('img');
-          img.src = chrome.runtime.getURL('icons/betterseqta-light-icon.png');
+          img.src = browser.runtime.getURL('icons/betterseqta-light-icon.png');
           let text = document.createElement('p');
           text.innerText = 'No lessons available.';
           dummyDay.append(img);
@@ -1846,20 +1889,23 @@ function CreateSubjectFilter(subjectcode, itemcolour, checked) {
   label.append(span);
 
   input.addEventListener('change', function (change) {
-    chrome.storage.local.get(null, function (storage) {
+    const result = browser.storage.local.get()
+    function open (storage) {
       let filters = storage.subjectfilters;
       let id = change.target.id.split('-')[1];
       filters[id] = change.target.checked;
 
-      chrome.storage.local.set({ subjectfilters: filters });
+      browser.storage.local.set({ subjectfilters: filters });
-    });
+    }
+    result.then(open, onError)
   });
 
   return label;
 }
 
 function CreateFilters(subjects) {
-  chrome.storage.local.get(null, function (result) {
+  const result = browser.storage.local.get()
+  function open (result) {
     let filteroptions = result.subjectfilters;
 
     let filterdiv = document.querySelector('#upcoming-filters');
@@ -1868,7 +1914,7 @@ function CreateFilters(subjects) {
       // eslint-disable-next-line
       if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
         filteroptions[element.code] = true;
-        chrome.storage.local.set({ subjectfilters: filteroptions });
+        browser.storage.local.set({ subjectfilters: filteroptions });
       }
       let elementdiv = CreateSubjectFilter(
         element.code,
@@ -1878,7 +1924,8 @@ function CreateFilters(subjects) {
 
       filterdiv.append(elementdiv);
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 function CreateUpcomingSection(assessments) {
@@ -1990,9 +2037,11 @@ function CreateUpcomingSection(assessments) {
       }
 
     }
-    chrome.storage.local.get(null, function (result) {
+    const result = browser.storage.local.get()
+    function open (result) {
       FilterUpcomingAssessments(result.subjectfilters);
-    });
+    }
+    result.then(open, onError)
   });
 }
 
@@ -2054,7 +2103,7 @@ function FilterUpcomingAssessments(subjectoptions) {
   }
 }
 
-chrome.storage.onChanged.addListener(function (changes) {
+browser.storage.onChanged.addListener(function (changes) {
   if (changes.subjectfilters) {
     FilterUpcomingAssessments(changes.subjectfilters.newValue);
   }
@@ -2132,7 +2181,8 @@ export function RemoveShortcutDiv(elements) {
 }
 
 function AddCustomShortcutsToPage() {
-  chrome.storage.local.get(['customshortcuts'], function (result) {
+  const result = browser.storage.local.get(['customshortcuts'])
+  function open (result) {
     var customshortcuts = Object.values(result)[0];
     if (customshortcuts.length > 0) {
       document.getElementsByClassName('shortcut-container')[0].style.display =
@@ -2142,7 +2192,8 @@ function AddCustomShortcutsToPage() {
         CreateCustomShortcutDiv(element);
       }
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 function SendHomePage() {
@@ -2162,7 +2213,7 @@ function SendHomePage() {
     const titlediv = document.getElementById('title').firstChild;
     titlediv.innerText = 'Home';
     document.querySelector('link[rel*="icon"]').href =
-      chrome.runtime.getURL('icons/icon-48.png');
+      browser.runtime.getURL('icons/icon-48.png');
 
     currentSelectedDate = new Date();
 
@@ -2178,7 +2229,7 @@ function SendHomePage() {
 
     // Formats the current date used send a request for timetable and notices later
     var TodayFormatted =
-      date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
+      date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() < 10 ? '0' : '') + date.getDate();
 
     // Replaces actual date with a selected date. Used for testing.
     // TodayFormatted = "2020-08-31";
@@ -2252,10 +2303,12 @@ function SendHomePage() {
     });
 
     // Adds the shortcuts to the shortcut container
-    chrome.storage.local.get(['shortcuts'], function (result) {
+    const result = browser.storage.local.get(['shortcuts'])
+    function open (result) {
       const shortcuts = Object.values(result)[0];
       addShortcuts(shortcuts);
-    });
+    }
+    result.then(open, onError)
 
     // Creates the upcoming container and appends to the home container
     var upcomingcontainer = document.createElement('div');
@@ -2310,98 +2363,174 @@ function SendHomePage() {
     );
 
     callHomeTimetable(TodayFormatted);
+    const labelArray = response.payload[1].value.split(' ')
 
-    // Sends similar HTTP Post Request for the notices
+    const xhr2 = new XMLHttpRequest()
-    var xhr2 = new XMLHttpRequest();
+    xhr2.open(
-    xhr2.open('POST', `${location.origin}/seqta/student/load/notices?`, true);
+      'POST',
-    xhr2.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
+      `${location.origin}/seqta/student/load/notices?`,
+      true
+    )
+    xhr2.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
     
     xhr2.onreadystatechange = function () {
       if (xhr2.readyState === 4) {
-        var NoticesPayload = JSON.parse(xhr2.response);
+        const NoticesPayload = JSON.parse(xhr2.response)
-        var NoticeContainer = document.getElementById('notice-container');
+        const NoticeContainer = document.getElementById('notice-container')
-        if (NoticesPayload.payload.length == 0) {
+        if (NoticesPayload.payload.length === 0) {
           if (!NoticeContainer.innerText) {
             // If no notices: display no notices
-            var dummyNotice = document.createElement('div');
+            const dummyNotice = document.createElement('div')
-            dummyNotice.textContent = 'No notices for today.';
+            dummyNotice.textContent = 'No notices for today.'
-            dummyNotice.classList.add('dummynotice');
+            dummyNotice.classList.add('dummynotice')
-            NoticeContainer.append(dummyNotice);
+            NoticeContainer.append(dummyNotice)
           }
         } else {
           if (!NoticeContainer.innerText) {
             // For each element in the response json:
-            chrome.storage.local.get(['DarkMode'], function (result) {
+            const result = browser.storage.local.get(['DarkMode'])
-              DarkMode = result.DarkMode;
+            function noticeInfoDiv (result) {
               for (let i = 0; i < NoticesPayload.payload.length; i++) {
+                if (labelArray.includes(JSON.stringify(NoticesPayload.payload[i].label))) {
                 // Create a div, and place information from json response
-                var NewNotice = document.createElement('div');
+                  const NewNotice = document.createElement('div')
-                NewNotice.classList.add('notice');
+                  NewNotice.classList.add('notice')
-                var title = stringToHTML(
+                  const title = stringToHTML(
-                  '<h3 style="color:var(--colour)">' +
+                    '<h3 style="color:var(--colour)">' + NoticesPayload.payload[i].title + '</h3>'
-                    NoticesPayload.payload[i].title +
+                  )
-                    '</h3>',
+                  NewNotice.append(title.firstChild)
-                );
-                NewNotice.append(title.firstChild);
 
-                if (NoticesPayload.payload[i].label_title != undefined) {
+                  if (NoticesPayload.payload[i].label_title !== undefined) {
-                  var label = stringToHTML(
+                    const label = stringToHTML(
-                    '<h5 style="color:var(--colour)">' +
+                      '<h5 style="color:var(--colour)">' + NoticesPayload.payload[i].label_title + '</h5>'
-                      NoticesPayload.payload[i].label_title +
+                    )
-                      '</h5>',
+                    NewNotice.append(label.firstChild)
-                  );
-                  NewNotice.append(label.firstChild);
                   }
 
-                var staff = stringToHTML(
+                  const staff = stringToHTML(
-                  '<h6 style="color:var(--colour)">' +
+                    '<h6 style="color:var(--colour)">' + NoticesPayload.payload[i].staff + '</h6>'
-                    NoticesPayload.payload[i].staff +
+                  )
-                    '</h6>',
+                  NewNotice.append(staff.firstChild)
-                );
-                NewNotice.append(staff.firstChild);
                   // Converts the string into HTML
-                let styles;
+                  const content = stringToHTML(NoticesPayload.payload[i].contents.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, '').replace(/ +/, ' '), true)
-                var content = stringToHTML(
-                  NoticesPayload.payload[i].contents,
-                  // eslint-disable-next-line
-                  styles = true,
-                );
                   for (let i = 0; i < content.childNodes.length; i++) {
-                  NewNotice.append(content.childNodes[i]);
+                    NewNotice.append(content.childNodes[i])
                   }
                   // Gets the colour for the top section of each notice
 
-                var colour = NoticesPayload.payload[i].colour;
+                  let colour = NoticesPayload.payload[i].colour
-                if (typeof colour == 'string') {
+                  if (typeof (colour) === 'string') {
-                  let rgb = GetThresholdOfColor(colour);
+                    const rgb = GetThresholdOfColor(colour)
-                  if (rgb < 100 && result.DarkMode) {
+                    const DarkModeResult = result.DarkMode
-                    colour = undefined;
+                    if (rgb < 100 && DarkModeResult) {
+                      colour = undefined
                     }
                   }
 
-                var colourbar = document.createElement('div');
+                  const colourbar = document.createElement('div')
-                colourbar.classList.add('colourbar');
+                  colourbar.classList.add('colourbar')
-                colourbar.style.background = 'var(--colour)';
+                  colourbar.style.background = 'var(--colour)'
-                NewNotice.style = `--colour: ${colour}`;
+                  NewNotice.style = `--colour: ${colour}`
                   // Appends the colour bar to the new notice
-                NewNotice.append(colourbar);
+                  NewNotice.append(colourbar)
                   // Appends the new notice into the notice container
-                NoticeContainer.append(NewNotice);
+                  NoticeContainer.append(NewNotice)
-              }
+                }
-            });
+              }
+            }
+            result.then(noticeInfoDiv, onError)
+          }
         }
       }
     }
-    };
     // Data sent as the POST request
-    xhr2.send(JSON.stringify({ date: TodayFormatted }));
+    const dateControl = document.querySelector('input[type="date"]')
+    xhr2.send(JSON.stringify({ date: dateControl.value }))
+    function onInputChange (e) {
+      xhr2.open('POST', `${location.origin}/seqta/student/load/notices?`, true)
+      xhr2.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
+      xhr2.send(JSON.stringify({ date: e.target.value }))
+      xhr2.onreadystatechange = function () {
+        if (xhr2.readyState === 4) {
+          const NoticesPayload = JSON.parse(xhr2.response)
+          const NoticeContainer = document.getElementById('notice-container')
+          if (NoticesPayload.payload.length === 0) {
+            if (!NoticeContainer.innerText) {
+              // If no notices: display no notices
+              const dummyNotice = document.createElement('div')
+              dummyNotice.textContent = 'No notices for today.'
+              dummyNotice.classList.add('dummynotice')
+              NoticeContainer.append(dummyNotice)
+            }
+          } else {
+            document.querySelectorAll('.notice').forEach(e => e.remove())
+            // For each element in the response json:
+            const result = browser.storage.local.get(['DarkMode'])
+            function noticeInfoDiv (result) {
+              for (let i = 0; i < NoticesPayload.payload.length; i++) {
+
+                if (labelArray.includes(JSON.stringify(NoticesPayload.payload[i].label))) {
+                // Create a div, and place information from json response
+                  const NewNotice = document.createElement('div')
+                  NewNotice.classList.add('notice')
+                  const title = stringToHTML(
+                    '<h3 style="color:var(--colour)">' + NoticesPayload.payload[i].title + '</h3>'
+                  )
+                  NewNotice.append(title.firstChild)
+
+                  if (NoticesPayload.payload[i].label_title !== undefined) {
+                    const label = stringToHTML(
+                      '<h5 style="color:var(--colour)">' + NoticesPayload.payload[i].label_title + '</h5>'
+                    )
+                    NewNotice.append(label.firstChild)
+                  }
+
+                  const staff = stringToHTML(
+                    '<h6 style="color:var(--colour)">' + NoticesPayload.payload[i].staff + '</h6>'
+                  )
+                  NewNotice.append(staff.firstChild)
+                  // Converts the string into HTML
+                  const content = stringToHTML(NoticesPayload.payload[i].contents.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, '').replace(/ +/, ' '), true)
+                  for (let i = 0; i < content.childNodes.length; i++) {
+                    NewNotice.append(content.childNodes[i])
+                  }
+                  // Gets the colour for the top section of each notice
+
+                  let colour = NoticesPayload.payload[i].colour
+                  if (typeof (colour) === 'string') {
+                    const rgb = GetThresholdOfColor(colour)
+                    const DarkModeResult = result.DarkMode
+                    if (rgb < 100 && DarkModeResult) {
+                      colour = undefined
+                    }
+                  }
+
+                  const colourbar = document.createElement('div')
+                  colourbar.classList.add('colourbar')
+                  colourbar.style.background = 'var(--colour)'
+                  NewNotice.style = `--colour: ${colour}`
+                  // Appends the colour bar to the new notice
+                  NewNotice.append(colourbar)
+                  // Appends the new notice into the notice container
+                  NoticeContainer.append(NewNotice)
+                }
+              }
+            }
+            result.then(noticeInfoDiv, onError)
+          }
+        }
+      }
+    }
+    dateControl.addEventListener('input', onInputChange)
 
     // Sends similar HTTP Post Request for the notices
-    chrome.storage.local.get(null, function (result) {
+    const result1 = browser.storage.local.get()
+    function open1 (result) {
       if (result.notificationcollector) {
         enableNotificationCollector();
       }
-    });
+    }
+    result1.then(open1, onError)
     let activeClassList;
     GetUpcomingAssessments().then((assessments) => {
       GetActiveClasses().then((classes) => {
@@ -2550,7 +2679,7 @@ function SendNewsPage() {
     titlediv.innerText = 'News';
     AppendLoadingSymbol('newsloading', '#news-container');
 
-    chrome.runtime.sendMessage({ type: 'sendNews' }, function (response) {
+    browser.runtime.sendMessage({ type: 'sendNews' }, function (response) {
       let newsarticles = response.news.articles;
       var newscontainer = document.querySelector('#news-container');
       document.getElementById('newsloading').remove();
@@ -2564,7 +2693,7 @@ function SendNewsPage() {
         articleimage.classList.add('articleimage');
 
         if (newsarticles[i].urlToImage == 'null') {
-          articleimage.style.backgroundImage = `url(${chrome.runtime.getURL(
+          articleimage.style.backgroundImage = `url(${browser.runtime.getURL(
             'icons/betterseqta-light-outline.png',
           )})`;
           articleimage.style.width = '20%';
@@ -2607,11 +2736,49 @@ async function CheckForMenuList() {
   }
 }
 
+function documentTextColor () {
+  const result = browser.storage.local.get(['DarkMode'])
+  function changeDocTextCol (result) {
+    const Darkmode = result.DarkMode
+    if (Darkmode) {
+      const documentArray = document.querySelectorAll('td:not([class^="colourBar"]):not([class^="title"])')
+      const fullDocArray = document.querySelectorAll('tr.document')
+      const linkArray = document.querySelectorAll('a.uiFile')
+      for (const item of fullDocArray) {
+        item.classList.add('documentDark')
+      }
+      for (const item of linkArray) {
+        item.setAttribute('style', 'color: #06b4fc;')
+      }
+      for (const item of documentArray) {
+        item.setAttribute('style', 'color: white')
+      }
+    } else {
+      const documentArray = document.querySelectorAll('td:not([class^="colourBar"]):not([class^="title"])')
+      const fullDocArray = document.querySelectorAll('tr.document')
+      const linkArray = document.querySelectorAll('a.uiFile')
+      for (const item of fullDocArray) {
+        item.classList.remove('documentDark')
+      }
+      for (const item of linkArray) {
+        item.setAttribute('style', 'color: #3465a4;')
+      }
+      for (const item of documentArray) {
+        item.setAttribute('style', 'color: black')
+      }
+    }
+  }
+  result.then(changeDocTextCol, onError)
+}
+browser.storage.onChanged.addListener(documentTextColor)
+
 function LoadInit() {
   console.log('[BetterSEQTA] Started Init');
-  chrome.storage.local.get(null, function (result) {
+  const result = browser.storage.local.get()
+  function open (result) {
     if (result.onoff) {
       SendHomePage();
     }
-  });
+  }
+  result.then(open, onError)
 }

src/background.js

@@ -1,4 +1,5 @@
-/*global chrome*/
+import browser from 'webextension-polyfill'
+import { onError } from './seqta/utils/onError.js';
 export const openDB = () => {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open('MyDatabase', 1);
@@ -56,22 +57,24 @@ export const readData = () => {
 };
 
 function reloadSeqtaPages() {
-  chrome.tabs.query({}, function (tabs) {
+  const result = browser.tabs.query({})
+    function open (tabs) {
     for (let tab of tabs) {
       if (tab.title.includes('SEQTA Learn')) {
-        chrome.tabs.reload(tab.id);
+        browser.tabs.reload(tab.id);
       }
     }
-  });
+  }
+  result.then(open, onError)
 }
 
 // Helper function to handle setting permissions
 const handleAddPermissions = () => {
-  if (typeof chrome.declarativeContent !== 'undefined') {
+  if (typeof browser.declarativeContent !== 'undefined') {
-    chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {});
+    browser.declarativeContent.onPageChanged.removeRules(undefined, () => {});
   }
   
-  chrome.permissions.request(
+  browser.permissions.request(
     { permissions: ['declarativeContent'], origins: ['*://*/*'] },
     (granted) => {
       if (granted) {
@@ -80,7 +83,7 @@ const handleAddPermissions = () => {
         ];
         
         rules.forEach(rule => {
-          chrome.declarativeContent.onPageChanged.addRules([rule]);
+          browser.declarativeContent.onPageChanged.addRules([rule]);
         });
         
         alert('Permissions granted. Reload SEQTA pages to see changes. If this workaround doesn\'t work, please contact the developer. It will be an easy fix');
@@ -90,22 +93,22 @@ const handleAddPermissions = () => {
 };
 
 // Main message listener
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
   switch (request.type) {
   case 'reloadTabs':
     reloadSeqtaPages();
     break;
   
   case 'currentTab':
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    browser.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, request, function (response) {
+      browser.tabs.sendMessage(tabs[0].id, request).then(function (response) {
         sendResponse(response);
       });
     });
     return true;
   
   case 'githubTab':
-    chrome.tabs.create({ url: 'github.com/SethBurkart123/EvenBetterSEQTA' });
+    browser.tabs.create({ url: 'github.com/SethBurkart123/EvenBetterSEQTA' });
     break;
     
   case 'setDefaultStorage':
@@ -218,12 +221,13 @@ const DefaultValues = {
 
 function SetStorageValue(object) {
   for (var i in object) {
-    chrome.storage.local.set({ [i]: object[i] });
+    browser.storage.local.set({ [i]: object[i] });
   }
 }
 
 function UpdateCurrentValues() {
-  chrome.storage.local.get(null, function (items) {
+  const result = browser.storage.local.get()
+  function open (items) {
     var CurrentValues = items;
 
     const NewValue = Object.assign({}, DefaultValues, CurrentValues);
@@ -253,11 +257,13 @@ function UpdateCurrentValues() {
     }
 
     SetStorageValue(NewValue);
-  });
+  }
+  result.then(open, onError)
 }
 
 function migrateOldStorage() {
-  chrome.storage.local.get(null, function (items) {
+  const result = browser.storage.local.get()
+  function open (items) {
     let shouldUpdate = false; // Flag to check if there is anything to update
     
     // Check for the old "Name" field and convert it to "name"
@@ -283,18 +289,18 @@ function migrateOldStorage() {
 
     // If there"s something to update, set the new values in storage
     if (shouldUpdate) {
-      chrome.storage.local.set({ shortcuts: items.shortcuts }, function() {
+      const setting = browser.storage.local.set({ shortcuts: items.shortcuts })
-        console.log('Migration completed.');
+      setting.then(() => console.log('Migration Completed.'))
-      });
     }
-  });
+  }
+  result.then(open, onError)
 }
 
-chrome.runtime.onInstalled.addListener(function (event) {
+browser.runtime.onInstalled.addListener(function (event) {
-  chrome.storage.local.remove(['justupdated']);
+  browser.storage.local.remove(['justupdated']);
   UpdateCurrentValues();
   if ( event.reason == 'install', event.reason == 'update' ) {
-    chrome.storage.local.set({ justupdated: true });
+    browser.storage.local.set({ justupdated: true });
     migrateOldStorage();
   }
 });

src/css/iframe.scss

@@ -66,3 +66,34 @@ table th {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
+
+html, p, div, span {
+  color: white !important;
+  background-color: #232323;
+}
+body {
+  background-color: #232323;
+}
+blockquote.forward > .preamble {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+blockquote.forward > .preamble > .date > .value,
+blockquote.forward > .preamble > .sender > .value {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+blockquote.forward > .preamble > .date > .label,
+blockquote.forward > .preamble > .sender > .label {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+#backgroundTable > * {
+  background-color: #161616;
+  border: none;
+}
+
+.userHTML>div>a:not(.resource) {
+	color: #06b4fc;
+	text-decoration: underline;
+	transition: text-shadow 0.5s;
+}

src/seqta/ui/ImageBackgrounds.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 export async function appendBackgroundToUI() {
   console.log('Starting appendBackgroundToUI...');
@@ -10,6 +10,6 @@ export async function appendBackgroundToUI() {
   background.id = 'background';
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
-  background.src = chrome.runtime.getURL('backgrounds/background.html');
+  background.src = browser.runtime.getURL('backgrounds/background.html');
   parent.appendChild(background);
 }

src/seqta/ui/Loading.js

@@ -1,4 +1,4 @@
-/*global chrome*/
+import browser from 'webextension-polyfill'
 import stringToHTML from '../utils/stringToHTML.js';
 
 const loadingSpinner = `
@@ -75,7 +75,7 @@ export default function loading() {
       </style>
     ${loadingSpinner}
   <div style="position: absolute;bottom: 0;right: 0;padding: 10px;color: #4f4f4f;text-anchor: middle;font-size: 20px;">v${
-  chrome.runtime.getManifest().version
+  browser.runtime.getManifest().version
 }</div></div>`,
   );
   var html = document.getElementsByTagName('html')[0];

src/seqta/ui/Themes.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 import localforage from 'localforage';
 
 let currentThemeClass = '';
@@ -77,7 +77,7 @@ const applyTheme = async (themeName) => {
     );
   }
 
-  chrome.storage.local.set({ DarkMode: darkMode, selectedColor: defaultColour });
+  browser.storage.local.set({ DarkMode: darkMode, selectedColor: defaultColour });
 };
 
 export const listThemes = async () => {

src/seqta/ui/colors/Manager.js

@@ -1,11 +1,12 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
-import { GetThresholdOfColor, GetiFrameCSSElement } from '../../../SEQTA.js';
+import { GetThresholdOfColor, GetCSSElement } from '../../../SEQTA.js';
 import { lightenAndPaleColor } from './lightenAndPaleColor.js';
 import ColorLuminance from './ColorLuminance.js';
+import { onError } from '../../utils/onError.js';
 
 // Helper functions
 const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value);
-const getChromeURL = (path) => chrome.runtime.getURL(path);
+const getChromeURL = (path) => browser.runtime.getURL(path);
 const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
 let DarkMode = null;
@@ -66,7 +67,7 @@ export function updateAllColors(storedSetting, newColor = null) {
   }
 
   let alliframes = document.getElementsByTagName('iframe');
-  let fileref = GetiFrameCSSElement();
+  let fileref = GetCSSElement('css/iframe.css');
 
   for (let i = 0; i < alliframes.length; i++) {
     const element = alliframes[i];
@@ -79,7 +80,7 @@ export function updateAllColors(storedSetting, newColor = null) {
     console.log(element.contentDocument.documentElement);
 
     element.contentDocument.documentElement.childNodes[1].style.color =
-      DarkMode ? 'black' : 'white';
+      DarkMode ? 'white' : 'black';
     element.contentDocument.documentElement.firstChild.appendChild(
       fileref,
     );
@@ -88,11 +89,13 @@ export function updateAllColors(storedSetting, newColor = null) {
 
 export function getDarkMode() {
   return new Promise((resolve, reject) => {
-    chrome.storage.local.get('DarkMode', (result) => {
+    const result = browser.storage.local.get('DarkMode')
-      if (chrome.runtime.lastError) {
+    function open (result) {
-        return reject(chrome.runtime.lastError);
+      if (browser.runtime.lastError) {
+        return reject(browser.runtime.lastError);
       }
       resolve(result.DarkMode);
-    });
+    }
+    result.then(open, onError)
   });
 }

src/seqta/utils/GetPrefs.js

@@ -0,0 +1,6 @@
+const GetPrefs = await fetch(`${location.origin}/seqta/student/load/prefs?`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ asArray: true, request: 'userPrefs' })
+  })
+  export const response = await GetPrefs.json()

src/seqta/utils/MessageListener.js

@@ -1,11 +1,11 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from '../../SEQTA.js';
 import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from '../ui/Themes.js';
 
 export class MessageHandler {
   constructor() {
-    chrome.runtime.onMessage.addListener(this.routeMessage.bind(this));
+    browser.runtime.onMessage.addListener(this.routeMessage.bind(this));
   }
 
   routeMessage(request, sender, sendResponse) {

src/seqta/utils/StorageListener.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 import {
   CreateBackground,
@@ -15,7 +15,7 @@ import { getDarkMode, updateAllColors } from '../ui/colors/Manager.js';
 export default class StorageListener {
   constructor() {
     this.darkMode = getDarkMode();
-    chrome.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
+    browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
   }
 
   handleStorageChanges(changes) {

src/seqta/utils/onError.js

@@ -0,0 +1 @@
+export function onError (error) { console.log(`Error: ${error}`) }

webpack.config.js

@@ -64,7 +64,7 @@ export default {
       patterns: [
         { from: 'public', to: '.' },
         { from: 'src/css/preview', to: 'css/preview' },
-        { from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js', to: '.'},
+        { from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js' },
         { from: 'interface/dist/client', to: 'client' },
         { from: 'interface/dist/index.html', to: 'interface/index.html' }
       ],