Merge branch 'FEATURE/SessionBasics' into dev

package-lock.json

@@ -1,38 +1,25 @@
 {
   "name": "browser_extension_template",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "browser_extension_template",
-      "version": "1.0.0",
+      "version": "0.0.1",
       "license": "MIT",
-      "dependencies": {
-        "friendly-helper": "^1.7.1"
-      },
       "devDependencies": {
         "@types/node": "^18.7.4",
         "sass": "^1.39.0",
         "typescript": "^4.2.4"
       }
     },
-    "node_modules/@types/aes-js": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/aes-js/-/aes-js-3.1.1.tgz",
-      "integrity": "sha512-SDSGgXT3LRCH6qMWk8OHT1vLSVNuHNvCpKCx2/TYtQMbMGGgxJC9fspwSkQjqzRagrWnCrxuLL3jMNXLXHHvSw=="
-    },
     "node_modules/@types/node": {
       "version": "18.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz",
       "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==",
       "dev": true
     },
-    "node_modules/aes-js": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz",
-      "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
-    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -106,15 +93,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/friendly-helper": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/friendly-helper/-/friendly-helper-1.7.1.tgz",
-      "integrity": "sha512-6X9baO2FZ/EReoJBNOP55fOO21Bu0Lnkr6cM97OHXPBgn+V0LF3rS1Nmxeb/WcQGomSkAO3kBi73HDcrEpUCiA==",
-      "dependencies": {
-        "@types/aes-js": "^3.1.1",
-        "aes-js": "^3.1.2"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -275,22 +253,12 @@
     }
   },
   "dependencies": {
-    "@types/aes-js": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/aes-js/-/aes-js-3.1.1.tgz",
-      "integrity": "sha512-SDSGgXT3LRCH6qMWk8OHT1vLSVNuHNvCpKCx2/TYtQMbMGGgxJC9fspwSkQjqzRagrWnCrxuLL3jMNXLXHHvSw=="
-    },
     "@types/node": {
       "version": "18.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz",
       "integrity": "sha512-RzRcw8c0B8LzryWOR4Wj7YOTFXvdYKwvrb6xQQyuDfnlTxwYXGCV5RZ/TEbq5L5kn+w3rliHAUyRcG1RtbmTFg==",
       "dev": true
     },
-    "aes-js": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz",
-      "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
-    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -341,15 +309,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "friendly-helper": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/friendly-helper/-/friendly-helper-1.7.1.tgz",
-      "integrity": "sha512-6X9baO2FZ/EReoJBNOP55fOO21Bu0Lnkr6cM97OHXPBgn+V0LF3rS1Nmxeb/WcQGomSkAO3kBi73HDcrEpUCiA==",
-      "requires": {
-        "@types/aes-js": "^3.1.1",
-        "aes-js": "^3.1.2"
-      }
-    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",

package.json

@@ -23,9 +23,6 @@
     "last 2 versions",
     "not dead"
   ],
-  "dependencies": {
-    "friendly-helper": "^1.7.1"
-  },
   "authors": [
     {
       "name": "Jonas Pfalzgraf",

public/manifest.json

@@ -14,6 +14,9 @@
     "default_title": "BrowserExtensionTemplate",
     "default_popup": "popup.html"
   },
+  "options_ui": {
+    "page": "options.html"
+  },
   "permissions": [
     "notifications"
   ],

public/options.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./favicon.ico">
+    <title>{{BET}} Options</title>
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but {{BET}} doesn't work properly without JavaScript enabled. Please enable it to
+        continue.</strong>
+    </noscript>
+    <div id="app">
+      <img src="./icons/icon128.png" class="logo" />
+      <h1>Settings</h1>
+      <div id="settings">
+      </div>
+    </div>
+    <footer>
+      <script type="module" src="./js/classes/settings.js"></script>
+    </footer>
+  </body>
+</html>

src/app.ts

@@ -1,3 +1,5 @@
+import { Session } from "./classes/session.js"
+
 class App {
 
     private static contentEntry: string = "content"
@@ -8,15 +10,19 @@ class App {
     }
 
     async main(): Promise<void> {
-        
+        console.log("Hello World")
     }
 
     async drawData(): Promise<void> {
+        const session = Session.getInstance()
         const contentRoot = <HTMLDivElement>document.getElementById(App.contentEntry)
         const body = document.createElement("div")
         const title = document.createElement("h1")
+        const text = document.createElement("p")
         title.innerText = "Hello World"
+        text.innerText = session.contentTest
         body.appendChild(title)
+        body.appendChild(text)
         contentRoot.appendChild(body)
     }
 }

src/background.ts

@@ -1,4 +1,3 @@
-
 class Background {
 
     constructor() {

src/classes/session.ts

@@ -0,0 +1,55 @@
+export class Session {
+
+    private static instance: Session;
+
+    private constructor() {
+    }
+
+    static getInstance() {
+        if (!Session.instance && !Session.load()) {
+            Session.instance = new Session();
+        }
+        if (!Session.instance && Session.load()) {
+            Session.instance = <Session>Session.load();
+        }
+        Session.save();
+        return Session.instance;
+    }
+
+    public static save() {
+        localStorage.setItem('session', JSON.stringify(this.instance));
+    }
+
+    public static load(): Session | null {
+        const session = localStorage.getItem('session');
+        if (session) {
+            const obj = <Session>JSON.parse(session);
+            const result = new Session();
+            result.contentTest = obj.contentTest;
+            return result;
+        }
+        return null;
+    }
+
+    public static reloadSession() {
+        const session = localStorage.getItem('session');
+        if (session) {
+            const obj = <Session>JSON.parse(session);
+            const result = new Session();
+            result.contentTest = obj.contentTest;
+            Session.instance = result;
+        }
+    }
+
+    public static resetSession() {
+        localStorage.removeItem('session');
+        sessionStorage.removeItem('session');
+        this.instance = new Session();
+        Session.save();
+        location.reload();
+    }
+
+    public readonly sessionId: string = crypto.randomUUID();
+
+    public contentTest: string = 'This is a simple example of a web application';
+}

src/classes/settings.ts

@@ -0,0 +1,29 @@
+import { Session } from "./session.js";
+
+class Settings {
+
+    private session = Session.getInstance();
+
+    constructor() {
+        this.renderSettings();
+    }
+
+    private async renderSettings(): Promise<void> {
+        const settings = <HTMLDivElement>document.getElementById('settings');
+        settings.innerHTML = `
+            <div class="form-group">
+                <label for="contentTest">Content Test</label>
+                <input type="text" class="form-control" id="contentTest" placeholder="Enter content test" value="${this.session.contentTest}">
+            </div>
+            <button type="button" class="btn btn-primary" id="saveSettings">Save</button>
+        `;
+        const saveSettings = <HTMLButtonElement>document.getElementById('saveSettings');
+        saveSettings.addEventListener('click', () => {
+            this.session.contentTest = (<HTMLInputElement>document.getElementById('contentTest')).value;
+            Session.save();
+            Session.reloadSession();
+        });
+    }
+}
+
+new Settings();

src/sass/_mixin.sass

@@ -15,10 +15,12 @@
 
 @mixin partialButton
 	button
-		width: 100% !important
+		width: 5rem !important
-		height: 100% !important
+		height: 2rem !important
 		text-align: center !important
-		margin: 0 !important
+		margin: 0.5rem !important
+		border-color: $seccond-color !important
+		border-radius: 0.5rem !important
 
 		@include respond-to(handhelds)
 			font-size: 3rem

src/sass/_root.sass

@@ -3,6 +3,6 @@ $main-font-color: white
 $main-font-color-hover: lightgrey
 $main-uschrift-font: 'Ubuntu', Arial
 $seccond-color: lightgrey
-$background-color: rgb(119, 178, 255)
+$background-color: #77B2FF
 $background-color-content: rgb(198, 223, 255)
 $logo-image: url('../icons/icon128.png')

tools/deploy.ts

@@ -36,7 +36,7 @@ function findHtmlFilesRecursive(source: string): string[] {
 }
 
 function replaceKeywordsInHtmlFile(file: string) {
-  const content = fs.readFileSync(file, 'utf8');
+  let content = fs.readFileSync(file, 'utf8');
   const pairs = appConfig.htmlTemplatePairs;
   pairs.forEach(function (pair: object) {
     // @ts-ignore