diff --git a/package-lock.json b/package-lock.json index 9c490ed..7fdbd2b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 76ea2e9..67ccc8c 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,6 @@ "last 2 versions", "not dead" ], - "dependencies": { - "friendly-helper": "^1.7.1" - }, "authors": [ { "name": "Jonas Pfalzgraf", diff --git a/public/manifest.json b/public/manifest.json index 7b2997d..2f57490 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -14,6 +14,9 @@ "default_title": "BrowserExtensionTemplate", "default_popup": "popup.html" }, + "options_ui": { + "page": "options.html" + }, "permissions": [ "notifications" ], diff --git a/public/options.html b/public/options.html new file mode 100644 index 0000000..1cd3cda --- /dev/null +++ b/public/options.html @@ -0,0 +1,26 @@ + + + + + + + + {{BET}} Options + + + + +
+ +

Settings

+
+
+
+ + + diff --git a/src/app.ts b/src/app.ts index 27095ba..727e9f0 100644 --- a/src/app.ts +++ b/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 { - + console.log("Hello World") } async drawData(): Promise { + const session = Session.getInstance() const contentRoot = 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) } } diff --git a/src/background.ts b/src/background.ts index f3af3fa..197f02f 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,4 +1,3 @@ - class Background { constructor() { diff --git a/src/classes/session.ts b/src/classes/session.ts new file mode 100644 index 0000000..3443233 --- /dev/null +++ b/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.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 = 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 = 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'; +} \ No newline at end of file diff --git a/src/classes/settings.ts b/src/classes/settings.ts new file mode 100644 index 0000000..772b290 --- /dev/null +++ b/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 { + const settings = document.getElementById('settings'); + settings.innerHTML = ` +
+ + +
+ + `; + const saveSettings = document.getElementById('saveSettings'); + saveSettings.addEventListener('click', () => { + this.session.contentTest = (document.getElementById('contentTest')).value; + Session.save(); + Session.reloadSession(); + }); + } +} + +new Settings(); \ No newline at end of file diff --git a/src/sass/_mixin.sass b/src/sass/_mixin.sass index 0e4c93a..41422c9 100644 --- a/src/sass/_mixin.sass +++ b/src/sass/_mixin.sass @@ -15,10 +15,12 @@ @mixin partialButton button - width: 100% !important - height: 100% !important + width: 5rem !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 diff --git a/src/sass/_root.sass b/src/sass/_root.sass index edabad7..e3babc1 100644 --- a/src/sass/_root.sass +++ b/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') diff --git a/tools/deploy.ts b/tools/deploy.ts index 8b6b7b0..a12bf54 100644 --- a/tools/deploy.ts +++ b/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