Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,127 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

README.md

@@ -0,0 +1,2 @@
+# webext-marah
+ Diverse Arten der Unterstützung für die Twitch-Streamerin Marah.

manifest.json

@@ -0,0 +1,35 @@
+{
+  "name": "Marah Supporter",
+  "description": "Diverse Arten der Unterstützung für die Twitch-Streamerin Marah.",
+  "manifest_version": 3,
+  "version": "1.0.2",
+  "homepage_url": "https://rocketbeans.tv/bohnen/60/Marah",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "marah-supporter-webext@schloebe.de"
+    }
+  },
+  "background": {
+    "service_worker": "scripts/service_worker.js"
+  },
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "72": "icons/72.png",
+    "96": "icons/96.png",
+    "128": "icons/128.png",
+    "256": "icons/256.png"
+  },
+  "action": {
+    "default_icon": {
+      "72": "icons/72d.png"
+    },
+    "default_title": "Marah Supporter",
+    "default_popup": "popup/overview.html"
+  },
+  "permissions": [
+    "activeTab",
+    "tabs"
+  ]
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "webextension-polyfill": "^0.10.0"
+  }
+}

popup/overview.css

@@ -0,0 +1,169 @@
+:root {
+	--marah-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	--marah-body-font-size: .7rem;
+	--marah-body-font-weight: 400;
+	--marah-body-line-height: 1.5;
+	--marah-body-color: #fff;
+	--marah-body-text-align: center;
+	--marah-body-bg: #212529;
+	--marah-primary-color: #D6B42D;
+	--marah-primary-color-rgb: 214, 180, 45;
+	--marah-secondary-color: #8A710F;
+	--marah-secondary-color-rgb: 138, 113, 15;
+	--marah-link-decoration: none;
+}
+
+body {
+	font-family: var(--marah-body-font-family);
+	font-size: var(--marah-body-font-size);
+	font-weight: var(--marah-body-font-weight);
+	line-height: var(--marah-body-line-height);
+	color: var(--marah-body-color);
+	text-align: var(--marah-body-text-align);
+	background-color: var(--marah-body-bg);
+	margin: 0;
+	padding: 0;
+	-webkit-text-size-adjust: 100%;
+	-webkit-tap-highlight-color: transparent;
+	user-select: none;
+}
+
+a {
+	color: var(--marah-primary-color);
+	text-decoration: var(--marah-link-decoration);
+	white-space: nowrap;
+}
+
+hr {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	border: 0;
+	border-top: 1px solid var(--marah-primary-color);
+}
+
+#popup-content {
+	margin: 20px;
+}
+
+#popup-cover {
+	width: 36px;
+	height: auto;
+}
+
+
+h2.section-title {
+	width: 100%;
+	margin: .7em auto;
+	overflow: hidden;
+	text-align: center;
+	font-weight: 400;
+	font-size: .8rem;
+	color: var(--marah-secondary-color);
+	white-space: nowrap;
+}
+
+h2.section-title:before,
+h2.section-title:after {
+	content: "";
+	display: inline-block;
+	width: 50%;
+	margin: -2px .5em 0 -55%;
+	vertical-align: middle;
+	border-bottom: 1px solid;
+}
+
+h2.section-title:after {
+	margin: -2px -55% 0 .5em;
+}
+
+.button {
+	--offset: 5px;
+	--border-size: 1px;
+	display: block;
+	position: relative;
+	padding: 1em 2em;
+	margin: 2em 2.5em 0 2.5em;
+	appearance: none;
+	border: 0;
+	background: transparent;
+	color: var(--marah-primary-color);
+	text-transform: uppercase;
+	letter-spacing: 0.25em;
+	outline: none;
+	cursor: pointer;
+	font-weight: bold;
+	border-radius: 0;
+	box-shadow: inset 0 0 0 var(--border-size) currentcolor;
+	transition: background 0.8s ease;
+	text-decoration: var(--marah-link-decoration);
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+#popup-content-reflinks {
+	margin-top: 2em;
+	margin-bottom: 2em;
+}
+
+#popup-content-reflinks>.button:first-child {
+	margin-top: 0;
+}
+
+#popup-content-reflinks>.button:last-child {
+	margin-bottom: 0;
+}
+
+.button:hover {
+	background: rgba(100, 0, 0, 0.03);
+}
+
+.button__horizontal, .button__vertical {
+	display: inline-block;
+	position: absolute;
+	top: var(--horizontal-offset, 0);
+	right: var(--vertical-offset, 0);
+	bottom: var(--horizontal-offset, 0);
+	left: var(--vertical-offset, 0);
+	transition: transform 0.8s ease;
+	will-change: transform;
+}
+
+.button__horizontal::before, .button__vertical::before {
+	content: "";
+	position: absolute;
+	border: inherit;
+}
+
+.button__horizontal {
+	--vertical-offset: calc(var(--offset) * -1);
+	border-top: var(--border-size) solid currentcolor;
+	border-bottom: var(--border-size) solid currentcolor;
+}
+
+.button__horizontal::before {
+	top: calc(var(--vertical-offset) - var(--border-size));
+	bottom: calc(var(--vertical-offset) - var(--border-size));
+	left: calc(var(--vertical-offset) * -1);
+	right: calc(var(--vertical-offset) * -1);
+}
+
+.button:hover .button__horizontal {
+	transform: scaleX(0);
+}
+
+.button__vertical {
+	--horizontal-offset: calc(var(--offset) * -1);
+	border-left: var(--border-size) solid currentcolor;
+	border-right: var(--border-size) solid currentcolor;
+}
+
+.button__vertical::before {
+	top: calc(var(--horizontal-offset) * -1);
+	bottom: calc(var(--horizontal-offset) * -1);
+	left: calc(var(--horizontal-offset) - var(--border-size));
+	right: calc(var(--horizontal-offset) - var(--border-size));
+}
+
+.button:hover .button__vertical {
+	transform: scaleY(0);
+}

popup/overview.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="overview.css"/>
+</head>
+
+<body>
+  <div id="popup-content">
+    <img src="../icons/256.png" alt="Marah Supporter" id="popup-cover" />
+
+    <h2 class="section-title">Aktuelle Ref-Links von Marah</h2>
+    <div id="popup-content-reflinks">Lädt...</div>
+    <h2 class="section-title">Marah unterstützen</h2>
+    <div id="popup-content-supportlinks">Lädt...</div>
+  </div>
+  <script src="overview.js"></script>
+</body>
+
+</html>