updating assets and rendering

.gitignore

@@ -688,4 +688,5 @@ FodyWeavers.xsd
 dist
 
 tools/syncConfig.js
-tools/deploy.js
+tools/deploy.js
+tools/v2.js

package-lock.json

@@ -1,46 +1,27 @@
 {
   "name": "browser_extension_template",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "browser_extension_template",
-      "version": "0.0.1",
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "bootstrap": "^5.2.0",
         "friendly-helper": "^1.7.1"
       },
       "devDependencies": {
-        "@types/bootstrap": "^5.1.6",
         "@types/node": "^18.7.4",
         "sass": "^1.39.0",
         "typescript": "^4.2.4"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "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/bootstrap": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.1.tgz",
-      "integrity": "sha512-jPdLpDnBTHeocqelEz+ZVP2eY12hIBXgJLV/n0URiQiiNLdCgHwDqaI0chijjn1qwvDNbjzhKDeYAHxsnIGtIA==",
-      "dev": true,
-      "dependencies": {
-        "@popperjs/core": "^2.9.2"
-      }
-    },
     "node_modules/@types/node": {
       "version": "18.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz",
@@ -74,24 +55,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bootstrap": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
-      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.5"
-      }
-    },
     "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -312,25 +275,11 @@
     }
   },
   "dependencies": {
-    "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
-    },
     "@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/bootstrap": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.1.tgz",
-      "integrity": "sha512-jPdLpDnBTHeocqelEz+ZVP2eY12hIBXgJLV/n0URiQiiNLdCgHwDqaI0chijjn1qwvDNbjzhKDeYAHxsnIGtIA==",
-      "dev": true,
-      "requires": {
-        "@popperjs/core": "^2.9.2"
-      }
-    },
     "@types/node": {
       "version": "18.7.4",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.4.tgz",
@@ -358,12 +307,6 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
-    "bootstrap": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
-      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
-      "requires": {}
-    },
     "braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",

package.json

@@ -2,14 +2,16 @@
   "name": "browser_extension_template",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "scripts": {
-    "deploy": "tsc ./tools/deploy.ts --target esnext --module esnext && node ./tools/deploy.js && npm run build-js && npm run build-css",
+    "deploy-v3": "npm run build-tooling && npm run sync && node ./tools/deploy.js && npm run build-js && npm run build-css",
+    "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
     "build-js": "tsc -p tsconfig.json",
     "build-css": "sass ./src/sass/:./dist/css/",
-    "sync": "tsc ./tools/syncConfig.ts --target esnext --module esnext && node ./tools/syncConfig.js"
+    "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext && tsc ./tools/syncConfig.ts --target esnext --module esnext && tsc ./tools/deploy.ts --target esnext --module esnext",
+    "sync": "npm run build-tooling && node ./tools/syncConfig.js"
   },
   "devDependencies": {
-    "@types/bootstrap": "^5.1.6",
     "@types/node": "^18.7.4",
     "sass": "^1.39.0",
     "typescript": "^4.2.4"
@@ -20,7 +22,22 @@
     "not dead"
   ],
   "dependencies": {
-    "bootstrap": "^5.2.0",
     "friendly-helper": "^1.7.1"
+  },
+  "authors": [
+    {
+      "name": "Jonas Pfalzgraf",
+      "email": "info@josunlp.de"
+    }
+  ],
+  "description": "A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework.",
+  "homepage": "https://github.com/JosunLP/BrowserExtensionTemplate",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:JosunLP/BrowserExtensionTemplate.git"
+  },
+  "bugs": {
+    "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
   }
-}
+}

public/manifest.json

@@ -1,32 +1,32 @@
 {
-    "name": "BrowserExtensionTemplate",
-    "version": "2.2.5",
-    "manifest_version": 3,
-    "description": "A Extension created for the FearNixx Community to monitor the uptime status.",
-    "homepage_url": "https://github.com/JosunLP/BrowserExtensionTemplate",
-    "icons": {
-        "16": "icons/icon16.png",
-        "48": "icons/icon48.png",
-        "128": "icons/icon128.png"
-    },
-    "action": {
-        "default_icon": "icons/icon16.png",
-        "default_title": "BrowserExtensionTemplate",
-        "default_popup": "popup.html"
-    },
-    "permissions": [
-        "notifications"
-    ],
-    "background": {
-        "service_worker": "js/background.js"
+  "name": "Browser Extension Template",
+  "version": "0.0.1",
+  "manifest_version": 3,
+  "description": "A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework.",
+  "homepage_url": "https://github.com/JosunLP/BrowserExtensionTemplate",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "action": {
+    "default_icon": "icons/icon16.png",
+    "default_title": "BrowserExtensionTemplate",
+    "default_popup": "popup.html"
+  },
+  "permissions": [
+    "notifications"
+  ],
+  "background": {
+    "service_worker": "js/background.js"
+  },
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+F",
+        "mac": "MacCtrl+Shift+F"
       },
-    "commands": {
-        "_execute_browser_action": {
-            "suggested_key": {
-                "default": "Ctrl+Shift+F",
-                "mac": "MacCtrl+Shift+F"
-            },
-            "description": "Opens popup.html"
-        }
+      "description": "Opens popup.html"
     }
+  }
 }

src/app.ts

@@ -13,8 +13,8 @@ class App {
 
     async drawData(): Promise<void> {
         const contentRoot = <HTMLDivElement>document.getElementById(App.contentEntry)
-        const body = new HTMLDivElement()
-        const title = new HTMLHeadingElement()
+        const body = document.createElement("div")
+        const title = document.createElement("h1")
         title.innerText = "Hello World"
         body.appendChild(title)
         contentRoot.appendChild(body)

src/sass/app.sass

@@ -1,7 +1,6 @@
 @import 'root'
 @import 'mixin'
 @import 'content'
-@import '../../node_modules/bootstrap/scss/bootstrap'
 
 body
     height: 30rem

tools/deploy.ts

@@ -1,7 +1,8 @@
-var fs = require('fs');
-var path = require('path');
-var DEPLOY_ENTRY = "./public";
-var DEPLOY_TARGET = "./dist";
+import * as fs from 'fs';
+import * as path from 'path';
+const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
+var DEPLOY_ENTRY = "./public/";
+var DEPLOY_TARGET = "./dist/";
 
 function deleteFolderRecursive(path: string) {
   if (fs.existsSync(path)) {
@@ -17,6 +18,39 @@ function deleteFolderRecursive(path: string) {
   }
 }
 
+function findHtmlFilesRecursive(source: string): string[] {
+  var files: string[] = [];
+  var dir = fs.readdirSync(source);
+  dir.forEach(function(file: any) {
+    var sourceFile = path.join(source, file);
+    var stat = fs.lstatSync(sourceFile);
+    if (stat.isDirectory()) {
+      files = files.concat(findHtmlFilesRecursive(sourceFile));
+    } else {
+      if (path.extname(sourceFile) == '.html') {
+        files.push(sourceFile);
+      }
+    }
+  });
+  return files;
+}
+
+function replaceKeywordsInHtmlFile(file: string, keywords: string[], values: string[]) {
+  var content = fs.readFileSync(file, 'utf8');
+  for (var i = 0; i < keywords.length; i++) {
+    content = content.replace(new RegExp(keywords[i], 'g'), values[i]);
+  }
+  file = file.replace("public\\", DEPLOY_TARGET);
+  fs.writeFileSync(file, content);
+}
+
+function buildHtmlFiles(source: string, keywords: string[], values: string[]) {
+  var files = findHtmlFilesRecursive(source);
+  files.forEach(function(file: string) {
+    replaceKeywordsInHtmlFile(file, keywords, values);
+  });
+}
+
 function mkdirSync(path: string) {
   try {
     fs.mkdirSync(path);
@@ -43,5 +77,6 @@ function copyFiles(source: string, target: string) {
 deleteFolderRecursive(DEPLOY_TARGET);
 mkdirSync(DEPLOY_TARGET);
 copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET);
+buildHtmlFiles(DEPLOY_ENTRY, ["{{BET}}"], [appConfig.AppData.name]);
 
 console.log("Deployed to " + DEPLOY_TARGET);

tools/syncConfig.ts

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import * as fs from 'fs';
 
 const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
 const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));

tools/v2.ts

@@ -0,0 +1,7 @@
+import * as fs from 'fs';
+
+const manifest = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf8'));
+
+manifest.manifest_version = 2;
+
+fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2));

tsconfig.json

@@ -5,7 +5,7 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es6",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
-    // "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "module": "ESNext",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
@@ -23,7 +23,7 @@
     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
+    "moduleResolution": "node",
     /* Strict Type-Checking Options */
     "strict": true,                                 /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */