Refactor entire extension code

.eslintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:wc/recommended',
+		'plugin:lit/recommended',
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaVersion: 12,
+		project: './tsconfig.json',
+		sourceType: 'module',
+	},
+	plugins: [
+		'@typescript-eslint',
+	],
+	rules: {
+		indent: [
+			'error',
+			2,
+			{ SwitchCase: 1 },
+		],
+		'linebreak-style': [
+			'error',
+			'unix',
+		],
+		quotes: [
+			'error',
+			'single',
+		],
+		semi: [
+			'error',
+			'always',
+		],
+		'comma-dangle': [
+			'error',
+			'always-multiline',
+		],
+	}
+};

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - run: npm ci
+    - run: npm run lint
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - run: npm ci
+    - run: npm run type-check
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - run: npm ci
+    - run: npm run build

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 dist/content/
 dist/background.js
+dist/LICENSE-DETAILS.md

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "runem.lit-plugin",
+    "formulahendry.auto-rename-tag"
+  ]
+}

.vscode/typescript.code-snippets

@@ -0,0 +1,38 @@
+{
+  "WebComponent based on LitElement": {
+    "prefix": [
+      "webcomponent"
+    ],
+    "body": [
+      "import '@webcomponents/webcomponentsjs';",
+      "import { LitElement, css, html } from 'lit';",
+      "import { customElement, property } from 'lit/decorators';",
+      "",
+      "const ${TM_FILENAME_BASE/([A-Z])(.*)/${1:/downcase}${2}/} = 'flashkill${TM_FILENAME_BASE/([A-Z])([a-z])/-${1:/downcase}${2}/g}';",
+      "",
+      "@customElement(${TM_FILENAME_BASE/([A-Z])(.*)/${1:/downcase}${2}/})",
+      "class ${TM_FILENAME_BASE} extends LitElement {",
+      "\t@property() $1",
+      "",
+      "\tstatic styles = css`",
+      "\t\t:host {",
+      "\t\t}",
+      "\t`;",
+      "",
+      "\trender() {",
+      "\t\treturn html`",
+      "\t\t\t$2",
+      "\t\t`;",
+      "\t}",
+      "}",
+      "",
+      "declare global {",
+      "\tinterface HTMLElementTagNameMap {",
+      "\t\t[${TM_FILENAME_BASE/([A-Z])(.*)/${1:/downcase}${2}/}]: ${TM_FILENAME_BASE},",
+      "\t}",
+      "};",
+      "",
+    ],
+    "description": "WebComponent based on LitElement"
+  },
+}

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = (api) => {
+  api.cache(true);
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      'babel-preset-expo',
+    ],
+  };
+};

dist/licenseDetailsLoader.js

@@ -1,2 +1,2 @@
-const url = chrome.runtime.getURL("LICENSE-DETAILS.txt");
-document.getElementById("license-link").href = url;
+const url = chrome.runtime.getURL('LICENSE-DETAILS.md');
+document.getElementById('license-link').href = url;

dist/manifest.json

@@ -5,8 +5,6 @@
     "version": "1.3.16",
     "background": {
         "scripts": [
-            "thirdParty/uint64.js",
-            "thirdParty/jquery-3.4.0.min.js",
             "background.js"
         ]
     },
@@ -16,23 +14,15 @@
                 "https://liga.99damage.de/*"
             ],
             "js": [
-                "content/content.js"
+                "content/index.js"
             ]
         },
         {
             "matches": [
                 "https://liga.99damage.de/leagues/teams/*-*"
             ],
             "js": [
-                "thirdParty/jquery-3.4.0.min.js",
-                "thirdParty/jquery.dataTables.js",
-                "thirdParty/tooltipster.bundle.min.js",
-                "thirdParty/jquery.multiselect.js",
-                "content/team-page/members/index.js"
-            ],
-            "css": [
-                "thirdParty/jquery.multiselect.css",
-                "thirdParty/tooltipster.bundle.min.css"
+                "content/team-page/index.js"
             ]
         }
     ],

dist/popup.html

@@ -1,45 +1,42 @@
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>flashkill</title>
-    <link rel="stylesheet" type="text/css" href="popup.css">
-  </head>
-  <body style="width: 450px; height: 580px; background-color: #222; color: white">
-    <img src="https://i.ibb.co/7vC3dsf/flashkill-logo-white.png" style="margin-left:auto; margin-right:auto; display:block; height:50"/>
-    <h3>Einstellungen</h3>
-    <table>
-      <tr>
-        <td>
-          Map Übersicht automatisch laden
-        </td>
-        <td>
-          <label class="switch">
-            <input id="maps-table-auto-load" type="checkbox">
-            <span class="slider round"></span>
-            <script src="script/popup.js"></script>
-          </label>
-        </td>
-      </tr>
-    </table>
-    <div style="margin-top: 10px">
-    <button id="clear-cache-button">Cache leeren<script src="./popup.js"></script></button>
+
+<head>
+  <meta charset="utf-8" />
+  <title>flashkill</title>
+  <link rel="stylesheet" type="text/css" href="popup.css">
+</head>
+
+<body style="width: 450px; height: 580px; background-color: #222; color: white">
+  <img src="https://i.ibb.co/7vC3dsf/flashkill-logo-white.png"
+    style="margin-left:auto; margin-right:auto; display:block; height:50" />
+  <h3>Einstellungen</h3>
+  <div style="margin-top: 10px">
+    <button id="clear-cache-button">Cache leeren
+      <script src="./popup.js"></script>
+    </button>
     <!-- <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=X489TLB8NSSPN&source=url" target="_blank">
       <img src="https://i.ibb.co/vX4JLpg/clear-cache.png" width="100px"> -->
-    </div>
-    <h3>Feedback</h3>
-    <p>Wir arbeiten an weiteren Features und freuen uns auf euer Feedback, damit wir die Extension zum größtmöglichen Nutzen weiterentwickeln können.
-      Schreibt uns daher gerne eine E-Mail mit euren Verbesserungsvorschläge an <b>flashkillapp@gmail.com</b> 
-      oder postet unter <a href="https://www.reddit.com/r/FlashkillApp" target="_blank" style="color:white">r/FlashkillApp</a>.</p>
-    <h3>Spenden</h3>
-    <p>Wir arbeiten in unserer Freizeit an diesem Projekt und sind dankbar für jede Spende auf unser PayPal Konto.</p>
-    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=X489TLB8NSSPN&source=url" target="_blank">
-      <img src="https://i.ibb.co/xXCmwJq/paypal-button-orange.png" width="150px">
-    </a>
-    <h3>About</h3>
-    <p>Version <script src="versionloader.js"></script></p>
-    <a id="license-link" target="_blank" style="color:white">Lizensinformationen zu verwendeter Open Source Software</a>
-    <script src="licenseDetailsLoader.js"></script>
-    <h3>Disclaimer</h3>
-    <p>Diese Extension steht in keiner direkten Verbindung zu 99Damage oder der Freaks 4U Gaming GmbH.</p>
+  </div>
+  <h3>Feedback</h3>
+  <p>Wir arbeiten an weiteren Features und freuen uns auf euer Feedback, damit wir die Extension zum größtmöglichen
+    Nutzen weiterentwickeln können.
+    Schreibt uns daher gerne eine E-Mail mit euren Verbesserungsvorschläge an <b>flashkillapp@gmail.com</b>
+    oder postet unter <a href="https://www.reddit.com/r/FlashkillApp" target="_blank"
+      style="color:white">r/FlashkillApp</a>.</p>
+  <h3>Spenden</h3>
+  <p>Wir arbeiten in unserer Freizeit an diesem Projekt und sind dankbar für jede Spende auf unser PayPal Konto.</p>
+  <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=X489TLB8NSSPN&source=url"
+    target="_blank">
+    <img src="https://i.ibb.co/xXCmwJq/paypal-button-orange.png" width="150px">
+  </a>
+  <h3>About</h3>
+  <p>Version
+    <script src="versionloader.js"></script>
+  </p>
+  <a id="license-link" target="_blank" style="color:white">Lizensinformationen zu verwendeter Open Source Software</a>
+  <script src="licenseDetailsLoader.js"></script>
+  <h3>Disclaimer</h3>
+  <p>Diese Extension steht in keiner direkten Verbindung zu 99Damage oder der Freaks 4U Gaming GmbH.</p>
 </body>
-</html>
+
+</html>

dist/popup.js

@@ -1,25 +1,3 @@
-
-document.getElementById("clear-cache-button").onclick = clearCache;
-
-function clearCache() {
-    chrome.storage.local.clear(() => alert("Cache wurde geleert."));
-}
-
-const mapsTableAutoLoadCheckbox = document.getElementById("maps-table-auto-load");
-
-mapsTableAutoLoadCheckbox.onclick = changeMapsTableAutoLoad;
-
-chrome.storage.sync.get(['mapsTableAutoLoad'], function(result) {
-				mapsTableAutoLoadCheckbox.checked = result.mapsTableAutoLoad;
-			});
-
-function changeMapsTableAutoLoad() {
-    if (mapsTableAutoLoadCheckbox.checked) {
-        alert("Mit dieser Auswahl läufst du Gefahr einen IP-Ban von 99Damage zu erhalten, wenn du zu viele neue Teamseiten in kurze Zeit lädst. Die Änderung tritt ab dem nächsten Öffnen einer Teamseite in Kraft.");
-        chrome.storage.sync.set({ mapsTableAutoLoad: true }, () => {} );
-    }
-    else {
-        alert("Die Map Übersicht wird jetzt nicht mehr automatisch geladen. Nutze den entsprechenden Button, der anstelle der Maps Übersicht erscheint, zum analysieren der Maps eines Teams. Die Änderung tritt ab dem nächsten Öffnen einer Teamseite in Kraft.");
-        chrome.storage.sync.set({ mapsTableAutoLoad: false }, () => {} );
-    }
-}
+const clearCache = () => chrome.storage.local.clear(() => alert('Cache wurde geleert.'));
+
+document.getElementById('clear-cache-button').onclick = clearCache;