functionality for switching contexts via buttons

css/dashboard.css

@@ -0,0 +1,46 @@
+.lit-button#dashboard-authentik-button{
+  background: url('/icons/goauthentik_logo.png') 30px 30px no-repeat;
+  background-size: contain;
+  background-position: center;
+  background-color: lightblue;
+  border: none; 
+  color: none;
+  text-align: center;
+  width: 250px;
+  height: 250px;
+  border-radius: 100px;
+}
+.lit-button#dashboard-authentik-button:hover{
+  background-color: lightgray;
+}
+
+.lit-button#dashboard-nextcloud-button{
+  background: url('/icons/nextcloud_logo.png') 30px 30px no-repeat;
+  background-size: contain;
+  background-position: center;
+  background-color: lightblue;
+  border: none; 
+  color: none;
+  text-align: center;
+  width: 250px;
+  height: 250px;
+  border-radius: 100px;
+}
+.lit-button#dashboard-nextcloud-button:hover{
+  background-color: lightgrey;
+}
+.lit-button#dashboard-wekan-button{
+  background: url('/icons/wekan_logo.png') 30px 30px no-repeat;
+  background-size: contain;
+  background-position: center;
+  background-color: lightblue;
+  border: none; 
+  color: none;
+  text-align: center;
+  width: 250px;
+  height: 250px;
+  border-radius: 100px;
+}
+.lit-button#dashboard-wekan-button:hover{
+  background-color: lightgrey;
+}

dashboard.js

@@ -0,0 +1,101 @@
+var buttonsize = 250;
+document.addEventListener("keyup", (event)  =>{
+  if (event.ctrlKey && event.code == "Enter") {
+    console.log("pressed");
+    var dashboard = document.querySelector('#lit-dashboard');
+    isFront = dashboard.style.display === 'block';
+    viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+    console.log(viewportWidth + 'px');
+    dashboard.style.left = (document.documentElement.clientWidth/2) - 1.5*buttonsize + 'px' ;
+    dashboard.style.top = (viewportHeight/2) -  buttonsize + 'px';
+    dashboard.style.position = "fixed";
+    dashboard.style.zIndex = "3000";
+    dashboard.style.display = isFront ? 'none' : 'block';
+  }
+});
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+function deleteButtons(dashboard)
+{
+  document.getElementById("dashboard-nextcloud-button").remove();
+  document.getElementById("dashboard-wekan-button").remove();
+  document.getElementById("dashboard-authentik-button").remove();
+}
+function createButtons(baseUrl, dashboard)
+{
+
+  links= {dashboard: "https://", wekan: "https://board.", nextcloud: "https://cloud." }
+  
+  var wekanButton = document.createElement("button");
+  //wekanButton.innerHTML = "Wekan";
+  wekanButton.style.position= "relative";
+  wekanButton.style.top= buttonsize + 'px';
+  wekanButton.setAttribute("class", "lit-button wekan-button");
+  wekanButton.setAttribute("id", "dashboard-wekan-button");
+  wekanButton.addEventListener ("click", function() {
+    window.open(links["wekan"] + baseUrl, "_self");
+  });
+
+  var authentikButton = document.createElement("button");
+  //authentikButton.innerHTML = "Dashboard";
+  authentikButton.setAttribute("class", "lit-button authentik-button");
+  authentikButton.setAttribute("id", "dashboard-authentik-button");
+  authentikButton.addEventListener ("click", function() {
+    window.open(links["dashboard"] + baseUrl, "_self");
+  });
+  
+  var nextcloudButton = document.createElement("button");
+  //nextcloudButton.innerHTML = "Nextcloud";
+  nextcloudButton.setAttribute("class", "lit-button nextcloud-button");
+  nextcloudButton.setAttribute("id", "dashboard-nextcloud-button");
+  nextcloudButton.addEventListener ("click", function() {
+    window.open(links["nextcloud"] + baseUrl, "_self");
+  });
+  // 2. Append somewhere
+  dashboard.appendChild(nextcloudButton);
+  dashboard.appendChild(wekanButton);
+  dashboard.appendChild(authentikButton);
+}
+
+function setDashboard(baseUrl)
+{
+  console.log(baseUrl);  
+  if (document.getElementById('lit-dashboard'))
+  {
+    dashboard = document.getElementById('lit-dashboard');
+    dashboard.style.position = "fixed";
+    dashboard.style.zIndex='3000';
+    dashboard.style.height = '60px';
+    dashboard.style.display = 'none';
+    deleteButtons(dashboard);
+    createButtons(baseUrl, dashboard);
+  }
+  
+  else
+  {
+    var dashboard = document.createElement("div");
+    dashboard.setAttribute("id", "lit-dashboard");
+    dashboard.style.position = "fixed";
+    dashboard.style.zIndex='3000';
+    dashboard.style.height = '60px';
+    dashboard.style.display = 'none';
+    createButtons(baseUrl, dashboard);
+    var currentDiv = document.body.firstChild;
+    document.body.insertBefore(dashboard, currentDiv);
+  }
+  // erstelle ein neues div Element
+  // und gib ihm etwas Inhalt
+}
+function onGot(item) {
+  let baseUrl = "demo.local-it.org";
+  if (item.baseUrl) {
+    baseUrl = item.baseUrl;
+  }
+  setDashboard(baseUrl);
+}
+
+let getting = browser.storage.sync.get("baseUrl");
+getting.then(onGot, onError);

manifest.json

@@ -0,0 +1,34 @@
+{
+
+  "manifest_version": 2,
+  "name": "Dashboard",
+  "version": "1.0",
+
+  "description": "Adds a Dashboard Header before Webpage header.",
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.local-it.org/*"],
+      "js": ["dashboard.js"],
+      "css": [ "css/dashboard.css" ]
+    }
+  ],
+  "web_accessible_resources": [
+    "css/style.css",
+    "icons/Nextcloud_Logo.png",
+    "icons/wekan_logo.png",
+    "icons/goauthentik_logo.png"
+  ],
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"],
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "addon@example.com"
+    }
+  }
+
+}

options.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>BaseUrl<input type="text" id="base-url-link" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>

options.js

@@ -0,0 +1,23 @@
+function saveOptions(e) {
+  e.preventDefault();
+  browser.storage.sync.set({
+    baseUrl: document.querySelector("#base-url-link").value
+  });
+}
+
+function restoreOptions() {
+
+  function setCurrentChoice(result) {
+    document.querySelector("#base-url-link").value = result.baseUrl || "add Link here";
+  }
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  let getting = browser.storage.sync.get("baseUrl");
+  getting.then(setCurrentChoice, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);