diff --git a/.gitignore b/.gitignore
index 7528fd3..484f1e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
desktop.ini
-icons/action.xcf
TODO.txt
.releases
releases/*
diff --git a/_shared/darken_podcast.css b/_shared/darken_podcast.css
deleted file mode 100644
index 962a7ba..0000000
--- a/_shared/darken_podcast.css
+++ /dev/null
@@ -1,15 +0,0 @@
-html, body,
-#content, #primary,
-.post,
-.entry-header,
-.entry-title a,
-.entry-meta,
-.entry-content {
- background: #242424 !important;
- color: #fff !important;
-}
-
-.cat-links a,
-.page-numbers:link {
- color: #767676;
-}
diff --git a/_shared/darken_ps.css b/_shared/darken_ps.css
deleted file mode 100644
index 90d5934..0000000
--- a/_shared/darken_ps.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/* Hintergrund und Textfarbe der Hauptseite */
-body,
-iframe,
-.well {
- background: #111111 !important;
- color: #fff !important;
-}
-
-/* Hintergrund und Textfarbe des Video-Containers */
-main.container,
-.bg-white {
- background: #242424 !important;
- color: #fff !important;
-}
-
-/* Farben der Navigations-Flyouts */
-div.dropdown, div.dropdown > div {
- background: #007743 !important;
- color: #fff !important;
-}
-
-/* Farben der Popups (z.B. Datenschutz-Infos) */
-.modal,
-.modal-header,
-.modal-body,
-.modal-footer {
- background: #242424 !important;
- color: #fff !important;
-}
-.modal-footer > .button-secondary {
- background: darkred;
-}
-
-/* Breadcrumbs */
-ol.list-reset > div.mr-3 {
- color: white;
-}
-ol.list-reset > li.mr-3.active {
- color: white;
- text-decoration: underline;
-}
-
-/* Explizit Textfarbe für... */
-.media * /* Titel+Text unter Thumbnails */ {
- color: #fff !important;
-}
-.text-muted /* Untertext unter Artikeln */ {
- color: rgba(255, 255, 255, 0.6);
-}
-
-/* Profil bearbeiten-Seite */
-.profile-edit form,
-.profile-edit legend,
-.profile legend {
- background: #242424 !important;
- color: white !important;
-}
diff --git a/after.jpeg b/after.jpeg
new file mode 100644
index 0000000..fa10a5f
Binary files /dev/null and b/after.jpeg differ
diff --git a/background.js b/background.js
new file mode 100644
index 0000000..51f3431
--- /dev/null
+++ b/background.js
@@ -0,0 +1,48 @@
+if (typeof browser == "undefined") {
+ var browser = chrome;
+}
+
+function updateTheme(tab) {
+ browser.storage.local.get(null, (item) => {
+ if (item.isDark === true) {
+ browser.tabs.sendMessage(tab.id, {isDark:true})
+ browser.pageAction.setIcon({
+ tabId: tab.id,
+ path: {
+ 19: "icons/action-19.png",
+ 38: "icons/action-38.png"
+ }
+ });
+ }
+ else {
+ browser.tabs.sendMessage(tab.id, {isDark:false})
+ browser.pageAction.setIcon({
+ tabId: tab.id,
+ path: {
+ 19: "icons/action-off-19.png",
+ 38: "icons/action-off-38.png"
+ }
+ });
+ }
+ });
+}
+
+function toggleTheme(tab) {
+ browser.storage.local.get(null, (item) => {
+ browser.storage.local.set({ isDark: !item.isDark });
+ updateTheme(tab);
+ });
+}
+
+function init(tab) {
+ if (tab.url.includes("pietsmiet.de")) {
+ updateTheme(tab);
+ browser.pageAction.show(tab.id);
+ }
+}
+
+browser.tabs.onUpdated.addListener((id, info, tab) => {
+ init(tab);
+});
+
+browser.pageAction.onClicked.addListener(toggleTheme);
diff --git a/before.jpeg b/before.jpeg
new file mode 100644
index 0000000..bd1bb87
Binary files /dev/null and b/before.jpeg differ
diff --git a/changelog.js b/changelog.js
new file mode 100644
index 0000000..9d1b25b
--- /dev/null
+++ b/changelog.js
@@ -0,0 +1,19 @@
+function handleOnInstalled(details) {
+ let manifest = browser.runtime.getManifest();
+ if (details.reason == "install") {
+ browser.tabs.create({ url: "/onboarding-page.html" })
+ }
+ else if (details.reason == "update") {
+ let notificationOptions = {
+ type: "basic",
+ title: `Version ${manifest.version} Changelog`,
+ message: `${manifest.name} wurde aktualisiert. Das hat sich geändert:
+• Alles wurde komplett neu geschrieben, d.h. alle alten Bugs wurden behoben und (hoffentlich bessere Performance)
+• Diese Benachrichtigung wurde eingeführt`,
+ iconUrl: "icons/icon-48.png"
+ };
+ browser.notifications.create(notificationOptions);
+ }
+}
+
+browser.runtime.onInstalled.addListener(handleOnInstalled);
diff --git a/chrome/background.js b/chrome/background.js
deleted file mode 100644
index 9b6c132..0000000
--- a/chrome/background.js
+++ /dev/null
@@ -1,51 +0,0 @@
-var tabID; //global ist nicht schön
-
-function init() {
- var getStorage = chrome.storage.local.get(null,
- function getStorageCallback(items){
- if ("isDark" in items) {
- if (items["isDark"]) {
- _toggleDarkModeHelper();
- }
- }
- else {
- chrome.storage.local.set({isDark: false});
- }
- }
- )
-}
-
-//Zeige die Page Action für den Tab, aus dem eine Message kam (pietsmiet.de)
-function showPageAction(request, sender) {
- tabID = sender.tab.id;
- chrome.pageAction.show(tabID);
- init();
-}
-
-function toggleDarkMode(actionTitle) {
- if (actionTitle == "Abdunkeln") {
- chrome.tabs.sendMessage(tabID, "toDark"); //benachrichtige Content-Script, das Theme zu dunkel zu wechseln
- chrome.pageAction.setTitle({tabId: tabID, title: "Zurück zu Normal"});
- chrome.pageAction.setIcon({tabId: tabID, path: {
- 19: "icons/action-19.png",
- 38: "icons/action-38.png"
- }});
- }
- else {
- chrome.tabs.sendMessage(tabID, "reset"); //benachrichtige Content-Script, das Theme zu normal zu wechseln
- chrome.pageAction.setTitle({tabId: tabID, title: "Abdunkeln"});
- chrome.pageAction.setIcon({tabId: tabID, path: {
- 19: "icons/action-off-19.png",
- 38: "icons/action-off-38.png"
- }});
- }
-}
-
-//Helper-Funktion, weil getTitle unbedingt einen Callback haben muss o.O
-function _toggleDarkModeHelper() {
- //ruft toggleDarkMode auf und übergibt den aktuellen Action Title
- chrome.pageAction.getTitle({tabId: tabID}, toggleDarkMode);
-}
-
-chrome.runtime.onMessage.addListener(showPageAction); //Sobald das Background-Script eine Message erhält, showPageAction ausführen
-chrome.pageAction.onClicked.addListener(_toggleDarkModeHelper); //sobald auf die Page Action geklickt wurde, führe _toggleDarkModeHelper aus
diff --git a/chrome/content.js b/chrome/content.js
deleted file mode 100644
index a270f12..0000000
--- a/chrome/content.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const MAIN_CSS = chrome.runtime.getURL("darken_ps.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei
-const POD_CSS = chrome.runtime.getURL("darken_podcast.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei für de Podcast-Seite
-var isFirstLoad = true;
-
-function _podcastHelper() {
- var title = document.getElementsByClassName("mr-3 active")[0].innerText;
- if (title.includes("Podcast")) {
- var element2 = document.createElement("link");
- element2.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
- element2.setAttribute("rel", "stylesheet");
- element2.setAttribute("type", "text/css");
- element2.setAttribute("href", POD_CSS);
- var iFrame = document.getElementById("blockrandom");
- iFrame.contentWindow.document.getElementsByTagName("html")[0].appendChild(element2);
- console.log("Podcast darkend");
- }
-}
-
-function onToggleMode(request, sender) {
- if (request == "toDark") { //Wenn auf dunkel gewechselt werden soll
- var element = document.createElement("link");
- element.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
- element.setAttribute("rel", "stylesheet");
- element.setAttribute("type", "text/css");
- element.setAttribute("href", MAIN_CSS);
- document.getElementsByTagName("html")[0].appendChild(element); //hänge an das DOM an
- if (isFirstLoad) {
- window.addEventListener("load", function() {_podcastHelper();});
- isFirstLoad = false;
- _podcastHelper(); /* wirft fast immer einen Error, aber ohne ist es buggy */
- } else {
- _podcastHelper();
- }
- chrome.storage.local.set({isDark: true});
- }
- else { //also wenn auf normal gewechselt werden soll
- document.getElementById("darkmode").remove(); //entferne vorher erstelltes link-Element aus DOM
- var title = document.getElementsByClassName("mr-3 active")[0].innerText;
- if (title.includes("Podcast")) {
- var iFrame = document.getElementById("blockrandom");
- iFrame.contentWindow.document.getElementById("darkmode").remove();
- console.log("Podcast lightend");
- }
- chrome.storage.local.set({isDark: false});
- }
-}
-
-chrome.runtime.sendMessage("show the damn icon"); // Sende irgendwas zum Background, um dort die TabID zu haben
-chrome.runtime.onMessage.addListener(onToggleMode); //Sobald das Content-Script eine Message erhält, onToggleMode ausführen
diff --git a/chrome/manifest.json b/chrome/manifest.json
deleted file mode 100644
index d92f135..0000000
--- a/chrome/manifest.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
- "manifest_version": 2,
- "name": "Pietsmiet.de Dark Mode",
- "version": "17.5.1",
- "author": "Fabian Große/Saphareas",
- "homepage_url": "https://github.com/Saphareas/pietsmiet.de-Dark-Mode",
-
- "description": "Fügt der Pietsmiet.de-Seite ein dunkles Theme/einen Nachtmodus hinzu.",
-
- "icons": {
- "48": "icons/icon-48.png",
- "96": "icons/icon-96.png"
- },
-
- "content_scripts": [
- {
- "matches": ["*://*.pietsmiet.de/*"],
- "js": ["content.js"],
- "run_at": "document_start"
- }
- ],
-
- "background": {
- "scripts": ["background.js"],
- "persistent": true
- },
-
- "page_action": {
- "browser_style": true,
- "default_icon": {
- "19": "icons/action-off-19.png",
- "38": "icons/action-off-38.png"
- },
- "default_title": "Abdunkeln"
- },
-
- "permissions": [
- "activeTab",
- "storage"
- ],
-
- "web_accessible_resources": [
- "darken_ps.css",
- "darken_podcast.css"
- ]
-
-}
diff --git a/content.js b/content.js
new file mode 100644
index 0000000..9196474
--- /dev/null
+++ b/content.js
@@ -0,0 +1,20 @@
+if (typeof browser == "undefined") {
+ var browser = chrome;
+}
+
+function handleMessage(msg) {
+ let head = document.head;
+ let style = document.getElementById("darken-ps");
+ if (msg.isDark === true && !style) {
+ style = document.createElement("link");
+ style.href = browser.runtime.getURL("darken_ps.css");
+ style.rel = "stylesheet";
+ style.id = "darken-ps";
+ head.append(style);
+ }
+ else if (msg.isDark === false) {
+ style.remove();
+ }
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
diff --git a/darken_ps.css b/darken_ps.css
new file mode 100644
index 0000000..de1f16f
--- /dev/null
+++ b/darken_ps.css
@@ -0,0 +1,38 @@
+:root {
+ --background-dark: #242424;
+ --background-darker: #111111;
+ --pietsmiet-green-dark: #007734;
+}
+
+#creativeAdWrapper {
+ filter: brightness(0);
+}
+
+body, #app {
+ background: var(--background-darker) !important;
+}
+main.container,
+.bg-white {
+ background: var(--background-dark) !important;
+ color: white !important;
+}
+.dropdown .bg-white {
+ background: var(--pietsmiet-green-dark) !important;
+ color: white !important;
+}
+
+.text-smoke {
+ color: lightgray !important;
+}
+.text-smoke-darker{
+ color: darkgray !important;
+}
+
+.collapse .more,
+.ob-widget-section .ob-widget-header {
+ color: gray !important;
+}
+.item.disabled,
+.text-muted {
+ color: dimgray !important;
+}
diff --git a/firefox/background.js b/firefox/background.js
deleted file mode 100644
index 6dea09c..0000000
--- a/firefox/background.js
+++ /dev/null
@@ -1,51 +0,0 @@
-var tabID; //global ist nicht schön
-
-function init() {
- var getStorage = browser.storage.local.get(null,
- function getStorageCallback(items){
- if ("isDark" in items) {
- if (items["isDark"]) {
- _toggleDarkModeHelper();
- }
- }
- else {
- browser.storage.local.set({isDark: false});
- }
- }
- )
-}
-
-//Zeige die Page Action für den Tab, aus dem eine Message kam (pietsmiet.de)
-function showPageAction(request, sender) {
- tabID = sender.tab.id;
- browser.pageAction.show(tabID);
- init();
-}
-
-function toggleDarkMode(actionTitle) {
- if (actionTitle == "Abdunkeln") {
- browser.tabs.sendMessage(tabID, "toDark"); //benachrichtige Content-Script, das Theme zu dunkel zu wechseln
- browser.pageAction.setTitle({tabId: tabID, title: "Zurück zu Normal"});
- browser.pageAction.setIcon({tabId: tabID, path: {
- 19: "icons/action-19.png",
- 38: "icons/action-38.png"
- }});
- }
- else {
- browser.tabs.sendMessage(tabID, "reset"); //benachrichtige Content-Script, das Theme zu normal zu wechseln
- browser.pageAction.setTitle({tabId: tabID, title: "Abdunkeln"});
- browser.pageAction.setIcon({tabId: tabID, path: {
- 19: "icons/action-off-19.png",
- 38: "icons/action-off-38.png"
- }});
- }
-}
-
-//Helper-Funktion, weil getTitle unbedingt einen Callback haben muss o.O
-function _toggleDarkModeHelper() {
- //ruft toggleDarkMode auf und übergibt den aktuellen Action Title
- browser.pageAction.getTitle({tabId: tabID}, toggleDarkMode);
-}
-
-browser.runtime.onMessage.addListener(showPageAction); //Sobald das Background-Script eine Message erhält, showPageAction ausführen
-browser.pageAction.onClicked.addListener(_toggleDarkModeHelper); //sobald auf die Page Action geklickt wurde, führe _toggleDarkModeHelper aus
diff --git a/firefox/content.js b/firefox/content.js
deleted file mode 100644
index dd23bd7..0000000
--- a/firefox/content.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const MAIN_CSS = browser.runtime.getURL("darken_ps.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei
-const POD_CSS = browser.runtime.getURL("darken_podcast.css"); //Voll-qualifizierter Pfad zur "dunklen" CSS-Datei für de Podcast-Seite
-var isFirstLoad = true;
-
-function _podcastHelper() {
- var title = document.getElementsByClassName("mr-3 active")[0].innerText;
- if (title.includes("Podcast")) {
- var element2 = document.createElement("link");
- element2.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
- element2.setAttribute("rel", "stylesheet");
- element2.setAttribute("type", "text/css");
- element2.setAttribute("href", POD_CSS);
- var iFrame = document.getElementById("blockrandom");
- iFrame.contentWindow.document.getElementsByTagName("html")[0].appendChild(element2);
- console.log("Podcast darkend");
- }
-}
-
-function onToggleMode(request, sender) {
- if (request == "toDark") { //Wenn auf dunkel gewechselt werden soll
- var element = document.createElement("link");
- element.setAttribute("id", "darkmode"); //id, um es später wieder zu finden
- element.setAttribute("rel", "stylesheet");
- element.setAttribute("type", "text/css");
- element.setAttribute("href", MAIN_CSS);
- document.getElementsByTagName("html")[0].appendChild(element); //hänge an das DOM an
- if (isFirstLoad) {
- window.addEventListener("load", function() {_podcastHelper();});
- isFirstLoad = false;
- _podcastHelper(); /* wirft fast immer einen Error, aber ohne ist es buggy */
- } else {
- _podcastHelper();
- }
- browser.storage.local.set({isDark: true});
- }
- else { //also wenn auf normal gewechselt werden soll
- document.getElementById("darkmode").remove(); //entferne vorher erstelltes link-Element aus DOM
- var title = document.getElementsByClassName("mr-3 active")[0].innerText;
- if (title.includes("Podcast")) {
- var iFrame = document.getElementById("blockrandom");
- iFrame.contentWindow.document.getElementById("darkmode").remove();
- console.log("Podcast lightend");
- }
- browser.storage.local.set({isDark: false});
- }
-}
-
-browser.runtime.sendMessage("show the damn icon"); // Sende irgendwas zum Background, um dort die TabID zu haben
-browser.runtime.onMessage.addListener(onToggleMode); //Sobald das Content-Script eine Message erhält, onToggleMode ausführen
diff --git a/firefox/manifest.json b/firefox/manifest.json
deleted file mode 100644
index 872742b..0000000
--- a/firefox/manifest.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
- "manifest_version": 2,
- "name": "Pietsmiet.de Dark Mode",
- "version": "17.5.1",
- "author": "Fabian Große/Saphareas",
- "homepage_url": "https://github.com/Saphareas/pietsmiet.de-Dark-Mode",
-
- "description": "Fügt der Pietsmiet.de-Seite ein dunkles Theme/einen Nachtmodus hinzu.",
-
- "icons": {
- "48": "icons/icon-48.png",
- "96": "icons/icon-96.png"
- },
-
- "applications": {
- "gecko": {
- "id": "{af4fc8a6-ed40-488f-bd74-417b3906f78f}",
- "strict_min_version": "52.0"
- }
- },
-
- "content_scripts": [
- {
- "matches": ["*://*.pietsmiet.de/*"],
- "js": ["content.js"],
- "run_at": "document_start"
- }
- ],
-
- "background": {
- "scripts": ["background.js"]
- },
-
- "page_action": {
- "browser_style": true,
- "default_icon": {
- "19": "icons/action-off-19.png",
- "38": "icons/action-off-38.png"
- },
- "default_title": "Abdunkeln"
- },
-
- "permissions": [
- "activeTab",
- "storage"
- ],
-
- "web_accessible_resources": [
- "darken_ps.css",
- "darken_podcast.css"
- ]
-
-}
diff --git a/_shared/icons/action-19.png b/icons/action-19.png
similarity index 100%
rename from _shared/icons/action-19.png
rename to icons/action-19.png
diff --git a/_shared/icons/action-38.png b/icons/action-38.png
similarity index 100%
rename from _shared/icons/action-38.png
rename to icons/action-38.png
diff --git a/_shared/icons/action-off-19.png b/icons/action-off-19.png
similarity index 100%
rename from _shared/icons/action-off-19.png
rename to icons/action-off-19.png
diff --git a/_shared/icons/action-off-38.png b/icons/action-off-38.png
similarity index 100%
rename from _shared/icons/action-off-38.png
rename to icons/action-off-38.png
diff --git a/action.xcf b/icons/action.xcf
similarity index 100%
rename from action.xcf
rename to icons/action.xcf
diff --git a/edge/icons/icon-120.png b/icons/icon-120.png
similarity index 100%
rename from edge/icons/icon-120.png
rename to icons/icon-120.png
diff --git a/_shared/icons/icon-48.png b/icons/icon-48.png
similarity index 100%
rename from _shared/icons/icon-48.png
rename to icons/icon-48.png
diff --git a/edge/icons/icon-54.png b/icons/icon-54.png
similarity index 100%
rename from edge/icons/icon-54.png
rename to icons/icon-54.png
diff --git a/edge/icons/icon-90.png b/icons/icon-90.png
similarity index 100%
rename from edge/icons/icon-90.png
rename to icons/icon-90.png
diff --git a/_shared/icons/icon-96.png b/icons/icon-96.png
similarity index 100%
rename from _shared/icons/icon-96.png
rename to icons/icon-96.png
diff --git a/edge/manifest.json b/manifest.json
similarity index 59%
rename from edge/manifest.json
rename to manifest.json
index a826fd2..de42b05 100644
--- a/edge/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
-{
+{
"manifest_version": 2,
"name": "Pietsmiet.de Dark Mode",
- "version": "17.5.1",
+ "version": "17.6",
"author": "Fabian Große/Saphareas",
"homepage_url": "https://github.com/Saphareas/pietsmiet.de-Dark-Mode",
@@ -15,35 +15,34 @@
"120": "icons/icon-120.png"
},
- "content_scripts": [
- {
- "matches": ["*://*.pietsmiet.de/*"],
- "js": ["content.js"],
- "run_at": "document_start"
- }
- ],
+ "content_scripts": [{
+ "matches": ["*://*.pietsmiet.de/*"],
+ "js": ["content.js"],
+ "run_at": "document_start"
+ }],
"background": {
- "scripts": ["background.js"],
+ "scripts": [
+ "background.js",
+ "changelog.js"
+ ],
"persistent": true
},
- "page_action": {
+ "page_action": {
"default_icon": {
"19": "icons/action-off-19.png",
"38": "icons/action-off-38.png"
},
- "default_title": "Abdunkeln"
+ "default_title": "Theme umschalten"
},
"permissions": [
- "activeTab",
- "storage"
+ "tabs",
+ "storage",
+ "notifications"
],
- "web_accessible_resources": [
- "darken_ps.css",
- "darken_podcast.css"
- ]
+ "web_accessible_resources": ["darken_ps.css"]
}
diff --git a/onboarding-page.html b/onboarding-page.html
new file mode 100644
index 0000000..02d2dda
--- /dev/null
+++ b/onboarding-page.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+ MORREU!
+
+
+
+
+
+
Pietsmiet.de Dark Mode
+
+
+
MORREU!
+
+ Du hast "Pietsmiet.de Dark Mode" installiert. Wenn dir diese Erweiterung gefällt, gib ihr doch bitte eine positive Bewertung¹. Wenn nicht, sag mir doch einfach, warum.
+
+
+
+
+
Anleitung
+
Nachdem du die Erweiterung installiert hast, erscheint immer dieser Button, wenn du auf Pietsmiet.de unterwegs bist. Einfach draufklicken, und schon wechselt das Theme der Seite.
+ (Du kannst das mit dem Bild rechts testen.)
+