Added reload on SOMtonight toggle

background/js/index.js

@@ -5,11 +5,17 @@ function getSlogans() {
     var slogans;
     if (localStorage.getItem('SOMtodayntSlogans') != null) {
         slogans = JSON.parse(localStorage.getItem('SOMtodayntSlogans'));
+        tonight = JSON.parse(localStorage.getItem('SOMtonight'));
     } else {
-        var slogans = [ "Welkom bij SOMtodayn't" ]
+        var slogans = [ "Welkom bij SOMtodayn't" ];
+        var tonight = true;
         localStorage.setItem('SOMtodayntSlogans', JSON.stringify(slogans));
+        localStorage.setItem('SOMtonight', JSON.stringify(tonight));
     }
-    return slogans;
+    return [
+        tonight,
+        slogans
+    ];
 }
 
 // Update array in local storage
@@ -18,6 +24,11 @@ function setSlogans(array) {
     return true;
 }
 
+function setTonight(value) {
+    localStorage.setItem('SOMtonight', JSON.stringify(value));
+    return;
+}
+
 // Handle requests
 function handleMessage(request, sender, sendResponse) {
     var response;
@@ -28,9 +39,13 @@ function handleMessage(request, sender, sendResponse) {
             response = getSlogans();
             break;
 
-        case 'set':
+        case 'setSlogans':
             response = setSlogans(request.value);
             break;
+
+        case 'setTonight': 
+            response = setTonight(request.value);
+            break;
     }
     // Send response to either the content script or popup
     if (sender.tab) {

content/css/index.css

@@ -0,0 +1,207 @@
+/* Global styles */
+body {
+    background-color: #121212;
+}
+
+/* Login screen */
+/* Background */
+.stpanel section div#logo figure.figurelogo {
+    filter: grayscale(100%) brightness(400%);
+}
+.stpanel section {
+    background-color: #121212;
+}
+/* Marketing text */
+.stpanel section div#marketing {
+    color: #e1e1e1; 
+}
+/* Form container and messages */
+.stpanel section div.form--holder .stpanel--error--message, .stpanel section div.form--holder form {
+    color: #e1e1e1;
+    box-shadow: unset;
+    background-color: #1E1E1E;
+}
+.stpanel .loader--dot1, .stpanel .loader--dot2, .stpanel .loader--dot3, .stpanel .loader--dot4 {
+    background-color: #01A299;
+}
+.stpanel--loader {
+    background-color: unset;
+}
+.stpanel--links a {
+    color: #017374;
+}
+.stpanel--links a:hover {
+    color: #00B3A6;
+}
+/* Slogan */
+.stpanel section div#slogan span:last-of-type {
+    color: #01A299;
+}
+/* Inputs */
+.stpanel .form--input input {
+    color: #e1e1e1;
+    border-color: #e1e1e1;
+    background-color: #383838;
+}
+.stpanel .form--input input:focus {
+    color: #ebebeb;
+    border-color: #70EFDE;
+}
+.stpanel .form--input.state-disabled input {
+    background-color: #01A299;
+    border-color: #01A299;
+    color: #ebebeb;
+}
+.stpanel .form--input i {
+    color: #ebebeb;
+}
+.stpanel .form--input i:hover {
+    color: #a5a5a5;
+}
+/* Checkbox */
+.stpanel .form--checkbox:focus i, .stpanel .form--checkbox:hover i, .stpanel .form--radio:focus i, .stpanel .form--radio:hover i, .stpanel .form--select:focus select, .stpanel .form--select:hover select, .stpanel--screensaver .form--select:focus select, .stpanel--screensaver .form--select:hover select {
+    border-color: #01A299;
+}
+.stpanel .form--checkbox input + i::after{
+    color: #e1e1e1;
+}
+.stpanel .form--checkbox input:checked + i, .stpanel .form--radio input:checked + i {
+    background-color: #01A299;
+    border-color: #01A299;
+}
+/* Buttons */
+.button--stpanel, button.button--stpanel, input[type="submit"].button--stpanel {
+    color: #01A299;
+}
+.stpanel section div#marketing a.btn, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel, .stpanel section div.form--holder form a.button--stpanel, .stpanel--meldingen a.button--stpanel, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel, .stpanel--screensaver section div.form--holder form a.button--stpanel {
+    border-color: #01A299;
+    color: #01A299!important;
+}
+.stpanel section div#marketing a.btn:hover, .button--stpanel:active, .button--stpanel:focus, .button--stpanel:hover, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel:active, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel:focus, .stpanel section div.form--holder .stpanel--error--message a.button--stpanel:hover, .stpanel section div.form--holder form a.button--stpanel:active, .stpanel section div.form--holder form a.button--stpanel:focus, .stpanel section div.form--holder form a.button--stpanel:hover, .stpanel--meldingen a.button--stpanel:active, .stpanel--meldingen a.button--stpanel:focus, .stpanel--meldingen a.button--stpanel:hover, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel:active, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel:focus, .stpanel--screensaver section div.form--holder .stpanel--error--message a.button--stpanel:hover, .stpanel--screensaver section div.form--holder form a.button--stpanel:active, .stpanel--screensaver section div.form--holder form a.button--stpanel:focus, .stpanel--screensaver section div.form--holder form a.button--stpanel:hover, button.button--stpanel:active, button.button--stpanel:focus, button.button--stpanel:hover, input[type="submit"].button--stpanel:active, input[type="submit"].button--stpanel:focus, input[type="submit"].button--stpanel:hover {
+    background:#01A299;
+    color: #e1e1e1!important;
+}
+/* Footer */
+footer > span {
+    color: #e1e1e1;
+}
+
+/* Main screen */
+/* Header */
+span.logo {
+    opacity: 0.75;
+}
+#header-wrapper {
+    background-color: #1E1E1E;
+}
+#header-wrapper a {
+    color: #a5a5a5!important;
+}
+#header-wrapper a:hover {
+    color: #e1e1e1!important;
+    opacity: 1;
+}
+span.header {
+    color: unset;
+}
+#user img {
+    display: none;
+}
+#user span.header {
+    color: unset;
+}
+span#inbox-counter {
+    background-color: #01A299;
+    color: #121212!important;
+}
+
+/* Content Window */
+/* Main menu */
+#main-menu a.active, #main-menu a.active:hover {
+    background-color: #01A299;
+    color: #e1e1e1!important;
+}
+#main-menu a {
+    background-color: #232323;
+    color: #a5a5a5!important;    
+}
+#main-menu a:hover {
+    background-color: #292929;
+    color: #e1e1e1!important;
+}
+#main-menu-bottom {
+    background-color: #01A299;
+}
+#content {
+    box-shadow: unset;
+}
+/* Panels */
+#master-panel, #master-panel .panel-header {
+    background-color: #1E1E1E;
+    border: unset;
+    color: #e1e1e1;
+}
+.panel-header h2, #detail-panel h2, #detail-panel h3 {
+    color: #e1e1e1;
+}
+#master-panel h2, h1 {
+    color: #e1e1e1;
+}
+#master-panel .sub {
+    color: #a5a5a5;
+}
+div#detail-panel-wrapper {
+    background-color: #232323;
+}
+#master-panel ~ #detail-panel-wrapper, #content {
+    border: unset!important;
+}
+/* Date and type tags */
+#master-panel .date div, .pauze, .roster-table-header .day .huiswerk-items, .uurNummer, .type {
+    background-color: #2C2C2C!important;
+    color: #e1e1e1!important;
+    border-color: #a5a5a5!important;
+}
+#master-panel .date div p.date-day, #master-panel .date div p.date-month, #master-panel .date span {
+    color: #e1e1e1!important;
+}
+#master-panel .date div {
+    border-right: 0px !important;
+    margin: 0 0 0 -40px !important;
+    padding: 5px !important;
+}
+#master-panel .date div p.date-day {
+    background: unset;
+}
+/* Top-right buttons */
+.ribbon .chk.checked, .ribbon .chk:hover, .ribbon.chk.checked, .yellow.ribbon a {
+    color:#e1e1e1;
+    border-bottom: 3px solid #00C4B4;
+    background-color: unset!important;
+}
+.ribbon .chk, .ribbon .chk.checked:hover{
+    color: #a5a5a5;
+    border-color: #019592;
+}
+.yellow.ribbon span {
+    color: #a5a5a5;
+}
+/* Box items */
+.box {
+    background-color: #2C2C2C;
+    color: #e1e1e1;
+    border: unset;
+    margin-top: 5px;
+}
+.m-element {
+    color: #e1e1e1;
+    border: unset!important;
+}
+.m-element:hover {
+    background-color: #2C2C2C;
+}
+/* Ions */
+.icon-geen-van-beide, .icon-huiswerk, .icon-leermiddelen, .icon-maatregel, .icon-studiewijzer, .icon-toets {
+    background-color: #01A299;
+    color: #121212!important;
+}

content/js/index.js

@@ -2,42 +2,57 @@ console.log('Somtoday\'nt content script active');
 
 function changeSlogan(message) 
 {
-    // Select random slogan
-    console.log(`Loaded ${message.length} slogans`);
-    if (message.length >= 1) {
-        var random = Math.floor(Math.random() * message.length);
-        var sloganText = message[random].toLowerCase();
-        console.log(`Slogan changed to: ${sloganText}`);
+    if (message == 'reload') {
+        location.reload();
     } else {
-        var sloganText = "welkom bij somtodayn't";
-        console.log('No slogans found')
-    }
+        tonight = message[0];
+        slogans = message[1];
     
-    // Split the slogan into array
-    var sloganArray = sloganText.split(" ");
-    var slogan = {
-        white: '',
-        blue: ''
-    };
-    
-    // Set the last word in the array to be blue
-    if (sloganArray.length > 1) {
-        slogan.blue = sloganArray.pop();
-        for (let index = 0; index < sloganArray.length; index++) {
-            slogan.white = slogan.white + sloganArray[index] + " ";
+        // Select random slogan
+        console.log(`Loaded ${slogans.length} slogans`);
+        if (slogans.length >= 1) {
+            var random = Math.floor(Math.random() * slogans.length);
+            var sloganText = slogans[random].toLowerCase();
+            console.log(`Slogan changed to: ${sloganText}`);
+        } else {
+            var sloganText = "welkom bij somtodayn't";
+            console.log('No slogans found')
         }
-    } else {
-        slogan.white = sloganArray;
-    }
+        
+        // Split the slogan into array
+        var sloganArray = sloganText.split(" ");
+        var slogan = {
+            white: '',
+            blue: ''
+        };
+        
+        // Set the last word in the array to be blue
+        if (sloganArray.length > 1) {
+            slogan.blue = sloganArray.pop();
+            for (let index = 0; index < sloganArray.length; index++) {
+                slogan.white = slogan.white + sloganArray[index] + " ";
+            }
+        } else {
+            slogan.white = sloganArray;
+        }
+        
+        // Edit HTML
+        document.getElementById('slogan').innerHTML = 
+            `<span class="white block">${slogan.white}</span>
+             <span>${slogan.blue}</span>`
+        ;
     
-    // Edit HTML
-    document.getElementById('slogan').innerHTML = 
-        `<span class="white block">${slogan.white}</span>
-         <span>${slogan.blue}</span>`
-    ;
-
-    // Add a little credit
-    document.querySelectorAll('footer > span')[0].innerHTML = "Somtodayn't is een add-on door McArn.";
+        // Add a little credit
+        document.querySelectorAll('footer > span')[0].innerHTML = "Somtodayn't is een add-on door McArn.";
+    
+        // Set theme
+        console.log(tonight);
+        if (tonight) {
+            var cssUrl = browser.runtime.getURL("content/css/index.css");
+            var cssTag = `<link rel='stylesheet' href='${cssUrl}'>`;
+            document.body.innerHTML += cssTag;
+        }
+    }
 }
 
 // Send request to background script

manifest.json

@@ -2,7 +2,7 @@
 
     "manifest_version": 2,
     "name": "SOMtodayn't",
-    "version": "1.15",
+    "version": "1.20",
     "author": "McArn",
   
     "description": "Changes the slogan on the login page of the school management system SOMtoday.",
@@ -12,6 +12,11 @@
         "id": "arne@arnweb.nl"
       }
     },
+
+    "permissions": [
+      "tabs",
+      "storage"
+    ],
   
     "icons": {
       "25" : "assets/icons/25.png",
@@ -21,7 +26,10 @@
 
     "background": {
       "persistent": true,
-      "scripts": ["background/js/index.js"]
+      "scripts": [
+        "vendor/browser-polyfill.js",
+        "background/js/index.js"
+      ]
     },
 
     "browser_action": {
@@ -33,10 +41,17 @@
       "default_popup": "popup/html/index.html"
     },
 
+    "web_accessible_resources": [
+      "content/css/index.css"
+    ],
+
     "content_scripts": [
       {
         "matches": ["*://*.somtoday.nl/*"],
-        "js": ["content/js/index.js"]
+        "js": [
+          "vendor/browser-polyfill.js",
+          "content/js/index.js"
+        ]
       }
     ]
 

package-lock.json

@@ -2003,7 +2003,6 @@
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/dtrace-provider/-/dtrace-provider-0.8.8.tgz",
       "integrity": "sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==",
-      "optional": true,
       "requires": {
         "nan": "^2.14.0"
       }
@@ -4240,8 +4239,7 @@
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-      "optional": true
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
     "ms": {
       "version": "2.0.0",
@@ -4269,7 +4267,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
       "integrity": "sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=",
-      "optional": true,
       "requires": {
         "mkdirp": "~0.5.1",
         "ncp": "~2.0.0",
@@ -4280,7 +4277,6 @@
           "version": "6.0.4",
           "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
           "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-          "optional": true,
           "requires": {
             "inflight": "^1.0.4",
             "inherits": "2",
@@ -4293,7 +4289,6 @@
           "version": "2.4.5",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
           "integrity": "sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=",
-          "optional": true,
           "requires": {
             "glob": "^6.0.1"
           }
@@ -4313,8 +4308,7 @@
     "nan": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
-      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
-      "optional": true
+      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -4347,8 +4341,7 @@
     "ncp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
-      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
-      "optional": true
+      "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M="
     },
     "neo-async": {
       "version": "2.6.1",
@@ -5154,8 +5147,7 @@
     "safe-json-stringify": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz",
-      "integrity": "sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==",
-      "optional": true
+      "integrity": "sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -6229,6 +6221,12 @@
         "zip-dir": "1.0.2"
       }
     },
+    "webextension-polyfill": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.5.0.tgz",
+      "integrity": "sha512-aFrl38x43t1bTboX/paCT8I97+idzX/TY0+fuM52hrIkCpYfROEF9kSn0BXuEIi3J9LTYt2ZZKkhx9NB1qF3nA==",
+      "dev": true
+    },
     "webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",

popup/html/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <script type="application/javascript" src="/vendor/browser-polyfill.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="../css/index.css">
 </head>
@@ -9,16 +10,24 @@
     <div>
         <h2>SOMtodayn't</h2>
     </div>
+
     <h3>Slogan toevoegen</h3>
     <h6>Het laatste woord van de slogan wordt blauw.</h6>
     <form id="sloganForm">
         <input type="text" placeholder="Nieuwe slogan">
         <button type="submit">Toevoegen</button>
     </form>
+
+    <h3>SOMtonight™</h3>
+    <h6>Donkere modus voor SOMtoday</h6>
+    <input type="checkbox" name="tonight" id="tonight">
+    <label for="tonight">SOMtonight™ gebruiken</label>
+
     <h3>Bestaande slogans</h3>
     <h6>Klik op een slogan om deze te verwijderen.</h6>
     <div id="sloganList">
     </div>
+
     <span class="footer">By McArn  -  2019</span>
     <script src="../js/index.js"></script>
 </body>

popup/js/index.js

@@ -7,8 +7,8 @@ request = browser.runtime.sendMessage({
     type: "get"
 });
 request.then(function(message) {
-    var sloganArray = message.response;
-    // DEBUG // console.log(message.response);
+    var darkmode = message.response[0];
+    var sloganArray = message.response[1];
 
     // Add a slogan to the array
     function addSlogan(value) {
@@ -35,7 +35,7 @@ request.then(function(message) {
     // Send updated array to background script
     function updateSlogans(array) {
         request = browser.runtime.sendMessage({
-            type: "set",
+            type: "setSlogans",
             value: array
         });
         request.then(function() {
@@ -43,6 +43,37 @@ request.then(function(message) {
         }, handleError);
     }
 
+    // Add event listener to checkbox
+    var checkbox = document.getElementById('tonight');
+    if (darkmode) {
+        checkbox.checked = true;
+    }
+    checkbox.addEventListener('click', function(event) {
+        // Update value in local storage
+        request = browser.runtime.sendMessage({
+            type: "setTonight",
+            value: checkbox.checked
+        });
+        // Reload all SOMtoday tabs
+        var reload = browser.tabs.query({});
+        reload.then(logTabs, onError);
+    });
+
+    // Find id of somtoday.nl tab
+    function logTabs(tabs) {
+      for (let tab of tabs) {
+        // Match only tabs with url somtoday.nl
+        if (tab.url.includes('somtoday.nl')) {
+            browser.tabs.sendMessage(tab.id, 'reload');
+        }
+      }
+    }
+
+    // Handle query errors
+    function onError(error) {
+      console.log(`Error: ${error}`);
+    }
+
     // Add existing slogans to list items in the popup
     var sloganList = '';
     for (let index = 0; index < sloganArray.length; index++) {