Put content script and icons in seperate folders

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+web-ext-artifacts

background/js/index.js

@@ -0,0 +1,44 @@
+console.log('SOMtodayn\'t background script loaded')
+
+// Read array from local storage
+function getSlogans() {
+    var slogans;
+    if (localStorage.getItem('SOMtodayntSlogans') != null) {
+        slogans = JSON.parse(localStorage.getItem('SOMtodayntSlogans'));
+    } else {
+        var slogans = [ "Welkom bij SOMtodayn't" ]
+        localStorage.setItem('SOMtodayntSlogans', JSON.stringify(slogans));
+    }
+    return slogans;
+}
+
+// Update array in local storage
+function setSlogans(array) {
+    localStorage.setItem('SOMtodayntSlogans', JSON.stringify(array));
+    return true;
+}
+
+// Handle requests
+function handleMessage(request, sender, sendResponse) {
+    var response;
+    // DEBUG // console.log(sender);
+    // DEBUG // console.log("Request: " + request.type)
+    switch (request.type) {
+        case 'get':
+            response = getSlogans();
+            break;
+
+        case 'set':
+            response = setSlogans(request.value);
+            break;
+    }
+    // Send response to either the content script or popup
+    if (sender.tab) {
+        browser.tabs.sendMessage(sender.tab.id, response);
+    } else {
+        sendResponse({response: response});
+    }
+    // DEBUG //  console.log("Response: " + response)
+}
+  
+browser.runtime.onMessage.addListener(handleMessage);

content/js/index.js

@@ -0,0 +1,47 @@
+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}`);
+    } else {
+        var sloganText = "welkom bij somtodayn't";
+        console.log('No slogans found')
+    }
+    
+    // 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>`
+    ;
+
+    // Add a little credit
+    document.querySelectorAll('footer > span')[0].innerHTML = "Somtodayn't is een add-on door McArn.";
+}
+
+// Send request to background script
+browser.runtime.sendMessage({ type: "get"});
+
+// Receive response from background script
+browser.runtime.onMessage.addListener(changeSlogan);

manifest.json

@@ -0,0 +1,43 @@
+{
+
+    "manifest_version": 2,
+    "name": "SOMtodayn't",
+    "version": "1.15",
+    "author": "McArn",
+  
+    "description": "Changes the slogan on the login page of the school management system SOMtoday.",
+
+    "browser_specific_settings": {
+      "gecko": {
+        "id": "arne@arnweb.nl"
+      }
+    },
+  
+    "icons": {
+      "25" : "assets/icons/25.png",
+      "32" : "assets/icons/32.png",
+      "48": "assets/icons/48.png"
+    },
+
+    "background": {
+      "persistent": true,
+      "scripts": ["background/js/index.js"]
+    },
+
+    "browser_action": {
+      "default_icon": {
+        "32" : "assets/icons/32.png",
+        "25" : "assets/icons/25.png"
+      },
+      "default_title": "SOMtodayn't",
+      "default_popup": "popup/html/index.html"
+    },
+
+    "content_scripts": [
+      {
+        "matches": ["*://*.somtoday.nl/*"],
+        "js": ["content/js/index.js"]
+      }
+    ]
+
+}

popup/css/index.css

@@ -0,0 +1,49 @@
+body, html {
+    margin: 0;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #004f9c;
+    background: #e1e5f2;
+    width: 300px;
+    text-align: center;
+}
+body > div:first-of-type {
+    font-family: 'Bree Serif', serif;
+    z-index: 1000;
+    background: #004f9c;
+    color: #ffffff;
+    width: 100%;
+    padding-bottom: 5px;
+}
+body > div:first-of-type > h2 {
+    margin: 0;
+    font-size: 2.5em;
+    text-align: center;
+}
+h3 {
+    text-decoration: underline;
+    margin-bottom: 0;
+}
+h6 {
+    font-size: smaller;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+div#sloganList {
+    text-align: left;
+}
+div#sloganList > ul:hover {
+    color: #dd1c1a;
+    cursor: pointer;
+}
+div#sloganList > ul:before {
+    content: '⨯   ';
+}
+span.footer {
+    color: #004f9c;
+    position: absolute;
+    bottom: 2px;
+    right: 4px;
+    font-size: x-small;
+}

popup/html/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="../css/index.css">
+</head>
+<body>
+    <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>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>
+</html>

popup/js/index.js

@@ -0,0 +1,75 @@
+console.log("SOMtodayn't popup loaded.");
+var request;
+var response;
+
+// Get slogans from background script
+request = browser.runtime.sendMessage({
+    type: "get"
+});
+request.then(function(message) {
+    var sloganArray = message.response;
+    // DEBUG // console.log(message.response);
+
+    // Add a slogan to the array
+    function addSlogan(value) {
+        sloganArray.push(value);
+        updateSlogans(sloganArray);
+    }
+
+    // Remove a slogan from the array
+    function removeSlogan(id) {
+        var array = [];
+        if (sloganArray.length > 1) {
+            for (let index = 0; index < sloganArray.length; index++) {
+                const element = sloganArray[index];
+                if (index != id) {
+                    array.push(element);
+                }
+            }
+            updateSlogans(array);
+        } else {
+            window.alert("U kunt de laatste slogan niet verwijderen.");
+        }
+    }
+
+    // Send updated array to background script
+    function updateSlogans(array) {
+        request = browser.runtime.sendMessage({
+            type: "set",
+            value: array
+        });
+        request.then(function() {
+            location.reload();
+        }, handleError);
+    }
+
+    // Add existing slogans to list items in the popup
+    var sloganList = '';
+    for (let index = 0; index < sloganArray.length; index++) {
+        const element = sloganArray[index];
+        sloganList = sloganList + `<ul>${element}</ul>`;
+    }
+    document.getElementById('sloganList').innerHTML = sloganList;
+
+    // Get value for new slogan
+    document.getElementById('sloganForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+        addSlogan(event.target.children[0].value);
+        event.target.children[0].value = '';
+    });
+
+    // Add event listener to every list item for deleting slogans
+    var listElements = document.querySelectorAll("div#sloganList > ul");
+    for (let index = 0; index < listElements.length; index++) {
+        const element = listElements[index];
+        element.addEventListener("click", function() {
+            removeSlogan(index);
+        });
+    }
+
+}, handleError);
+
+function handleError(error) {
+  console.error(`SOMtodayn't Error: ${error}`);
+}
+