Version 1.1.0

README.md

@@ -4,7 +4,11 @@
 [![GitHub forks](https://img.shields.io/github/forks/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/network)
 [![GitHub stars](https://img.shields.io/github/stars/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/stargazers)
 [![GitHub license](https://img.shields.io/github/license/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate)
-![Twitter URL](https://img.shields.io/twitter/url?color=blue&logo=Twitter&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate)
+[![Twitter URL](https://img.shields.io/twitter/url?logo=twitter&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate)](https://twitter.com/intent/tweet?text=Look+what+i+found+on+GitHub+%23Developer%2C+%23SoftwareDeveloper%3A&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate)
+[![CodeFactor](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate/badge?style=for-the-badge)](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate)
+[![Known Vulnerabilities](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate/badge.svg?style=for-the-badge)](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate)
+
+## Description
 
 A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework.
 
@@ -20,3 +24,15 @@ Your sourcecode can be written in the `src` folder. The `public` folder contains
 With the `npm run deploy-v3` command you can deploy the extension to the dist folder, ready to be published to the chrome web store.
 With the `npm run deploy-v2` command you can deploy the extension to the dist folder, ready to be published to the firefox web store.
 This is necessary because the firefox web store needs the `manifest.json` file to be present in the version v2.
+
+## License
+
+This project is licensed under the [MIT license](https://opensource.org/licenses/MIT).
+
+## Contributing
+
+This project is open source. Feel free to fork and contribute!
+
+## Author
+
+Jonas Pfalzgraf

app.config.json

@@ -19,5 +19,11 @@
                 "email": "info@josunlp.de"
             }
         ]
-    }
+    },
+    "htmlTemplatePairs": [
+        {
+            "key": "{{BET}}",
+            "value": "Browser Extension Template"
+        }
+    ]
 }

package.json

@@ -8,7 +8,9 @@
     "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
     "build-js": "tsc -p tsconfig.json",
     "build-css": "sass ./src/sass/:./dist/css/",
-    "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",
+    "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext --lib ESNext && tsc ./tools/syncConfig.ts --target esnext --module esnext --lib ESNext && tsc ./tools/deploy.ts --target esnext --module esnext --lib ESNext",
+    "watch-ts": "tsc -w -p tsconfig.json",
+    "watch-sass": "sass --watch ./src/sass/:./dist/css/",
     "sync": "npm run build-tooling && node ./tools/syncConfig.js"
   },
   "devDependencies": {

tools/deploy.ts

@@ -1,13 +1,13 @@
 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/";
+const DEPLOY_ENTRY = "./public/";
+const DEPLOY_TARGET = "./dist/";
 
 function deleteFolderRecursive(path: string) {
   if (fs.existsSync(path)) {
-    fs.readdirSync(path).forEach(function(file: string) {
-      var curPath = path + "/" + file;
+    fs.readdirSync(path).forEach(function (file: string) {
+      const curPath = path + "/" + file;
       if (fs.lstatSync(curPath).isDirectory()) {
         deleteFolderRecursive(curPath);
       } else {
@@ -19,11 +19,11 @@ 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);
+  let files: string[] = [];
+  const dir = fs.readdirSync(source);
+  dir.forEach(function (file: string) {
+    const sourceFile = path.join(source, file);
+    const stat = fs.lstatSync(sourceFile);
     if (stat.isDirectory()) {
       files = files.concat(findHtmlFilesRecursive(sourceFile));
     } else {
@@ -35,36 +35,38 @@ function findHtmlFilesRecursive(source: string): string[] {
   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]);
-  }
+function replaceKeywordsInHtmlFile(file: string) {
+  const content = fs.readFileSync(file, 'utf8');
+  const pairs = appConfig.htmlTemplatePairs;
+  pairs.forEach(function (pair: object) {
+    // @ts-ignore
+    content = content.replaceAll(pair.key, pair.value);
+  });
   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 buildHtmlFiles(source: string) {
+  const files = findHtmlFilesRecursive(source);
+  files.forEach(function (file: string) {
+    replaceKeywordsInHtmlFile(file);
   });
 }
 
 function mkdirSync(path: string) {
   try {
     fs.mkdirSync(path);
-  } catch(e: any) {
-    if ( e.code != 'EEXIST' ) throw e;
+  } catch (e: any) {
+    if (e.code != 'EEXIST') throw e;
   }
 }
 
 function copyFiles(source: string, target: string) {
-  var files = fs.readdirSync(source);
-  files.forEach(function(file: any) {
-    var sourceFile = path.join(source, file);
-    var targetFile = path.join(target, file);
-    var stat = fs.lstatSync(sourceFile);
+  const files = fs.readdirSync(source);
+  files.forEach(function (file: string) {
+    const sourceFile = path.join(source, file);
+    const targetFile = path.join(target, file);
+    const stat = fs.lstatSync(sourceFile);
     if (stat.isDirectory()) {
       mkdirSync(targetFile);
       copyFiles(sourceFile, targetFile);
@@ -77,6 +79,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]);
+buildHtmlFiles(DEPLOY_ENTRY);
 
 console.log("Deployed to " + DEPLOY_TARGET);

tools/v2.ts

@@ -2,6 +2,44 @@ import * as fs from 'fs';
 
 const manifest = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf8'));
 
-manifest.manifest_version = 2;
+manifest.manifest_version = 2
+
+manifest.background.scripts = []
+
+manifest.background.scripts.push(manifest.background.service_worker)
+delete manifest.background.type
+delete manifest.background.service_worker
+manifest.background.persistent = true
+if (manifest.host_permissions) {
+    manifest.permissions.push(manifest.host_permissions)
+}
+if (manifest.optional_host_permissions) {
+    manifest.permissions.push(manifest.optional_host_permissions)
+}
+delete manifest.host_permissions
+delete manifest.optional_host_permissions
+
+let newContentSecurityPolicy = ""
+
+try {
+    for (const policy of manifest.content_security_policy) {
+        newContentSecurityPolicy += policy.key + "'" + policy.value + "'" + " "
+    }
+} catch (e) {
+    newContentSecurityPolicy = "default-src 'self'"
+}
+
+manifest.content_security_policy = newContentSecurityPolicy
+
+try {
+    manifest.web_accessible_resources = manifest.web_accessible_resources.resources
+} catch (e) {
+    manifest.web_accessible_resources = []
+}
+
+if (manifest.action) {
+    manifest.browser_action = manifest.action
+}
+delete manifest.action
 
 fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2));

tsconfig.json

@@ -4,9 +4,9 @@
 
     /* 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'. */
+    "target": "ESNext",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', 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. */
+    // "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */