JosunLP/BrowserExtensionTemplate
1
0
Fork 0
mirror of https://github.com/JosunLP/BrowserExtensionTemplate.git synced 2025-06-21 10:01:08 +00:00
Code Issues Projects Releases Wiki Activity Actions

Merge branch 'FEATURE/SessionBasics' into dev

Browse source
This commit is contained in:
Jonas Pfalzgraf 2022-08-16 15:26:32 +02:00
commit 69a4cc6907
11 changed files with 129 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
package-lock.json generated
View file

@ -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",

3
package.json
View file

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

3
public/manifest.json
View file

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

26
public/options.html Normal file
View file

@ -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>

8
src/app.ts
View file

@ -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)
}
}

1
src/background.ts
View file

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

55
src/classes/session.ts Normal file
View file

@ -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';
}

29
src/classes/settings.ts Normal file
View file

@ -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();

8
src/sass/_mixin.sass
View file

@ -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

2
src/sass/_root.sass
View file

@ -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')

2
tools/deploy.ts
View file

@ -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