Verbessere Country Flag Fixer

country-flag-fixer.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Country Flag Fixer
 // @namespace    https://git.ponywave.de/Akamaru/Userscripts
-// @version      1.0
+// @version      1.1
 // @description  Ersetzt Ländercodes mit echten Flaggen-Emojis unter Windows/Chromium
 // @author       Akamaru
 // @match        *://*/*
@@ -12,7 +12,6 @@
 // @run-at       document-start
 // ==/UserScript==
 
-// Source: https://github.com/talkjs/country-flag-emoji-polyfill
 (function() {
     'use strict';
 
@@ -20,16 +19,12 @@
     const extentionStyleTagId = "country-flag-fixer-ext";
     const headStyleTagId = "country-flag-fixer-ext-head";
 
-    /**
-     * Registriere die Custom Font-Face für Flaggen-Emojis
-     */
     const loadFontFace = () => {
         const fontUrl = GM_getResourceURL('TwemojiCountryFlags');
         const style = document.createElement("style");
         style.setAttribute("type", "text/css");
         style.setAttribute("id", headStyleTagId);
 
-        // Unicode range generiert von: https://wakamaifondue.com/beta/
         style.textContent = `
             @font-face {
                 font-family: "${replacementFontName}";
@@ -40,50 +35,39 @@
 
             @font-face {
                 font-family: "${replacementFontName}";
-                font-style: italic; /* Verhindert kursive Flaggen */
+                font-style: italic;
                 src: url('${fontUrl}') format('woff2');
                 unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
             }
         `;
 
-        // Prüfe auf Fälle wie SVG-Dateien ohne head-Element
         if (document.head != undefined) {
             document.head.appendChild(style);
         }
     };
 
-    /**
-     * Extrahiere font-family Regeln aus allen Stylesheets
-     */
     const extractFontFamilyRules = () => {
         const fontFamilyRules = [];
 
         for (const sheet of document.styleSheets) {
-
-            // Ignoriere Styles von dieser Extension
             if (sheet.ownerNode?.id == extentionStyleTagId || sheet.ownerNode?.id == headStyleTagId)
                 continue;
 
-            // Ignoriere non-screen Stylesheets
             const sheetMediaBlacklist = ['print', 'speech', 'aural', 'braille', 'handheld', 'projection', 'tty'];
             if (sheetMediaBlacklist.includes(sheet.media.mediaText))
                 continue;
 
             try {
-                // Loop durch jeden CSS-Selektor im Stylesheet
                 for (const rule of sheet.cssRules) {
-
                     if (!rule.style || !rule.style?.fontFamily)
                         continue;
 
                     const selectorText = rule.selectorText;
                     const fontFamily = rule.style.fontFamily;
 
-                    // 'inherit' kann nicht mit anderen Fonts kombiniert werden
                     if (fontFamily == 'inherit')
                         continue;
 
-                    // Bereits modifizierte Selektoren ignorieren
                     if (fontFamily.toLowerCase().includes(replacementFontName.toLowerCase()))
                         continue;
 
@@ -91,39 +75,30 @@
                 }
             }
             catch (e) {
-                // Manche Stylesheets sind wegen CORS nicht zugreifbar
             }
         }
 
         return fontFamilyRules;
     };
 
-    /**
-     * Erstelle neues Style-Tag mit überschriebenen font-family Regeln
-     */
     const createNewStyleTag = (fontFamilyRules) => {
         const style = document.createElement("style");
         style.setAttribute("type", "text/css");
         style.setAttribute("id", extentionStyleTagId);
 
         fontFamilyRules.forEach((rule) => {
-            // Setze Country Flags Font als Hauptfont; Original als Fallback
             style.textContent += `${rule.selectorText} { font-family: '${replacementFontName}', ${rule.fontFamily} !important; }\n`;
         });
 
         return style;
     };
 
-    /**
-     * Wende Custom Font Styles auf die Seite an
-     */
     const applyCustomFontStyles = () => {
         const existingSheet = document.getElementById(extentionStyleTagId);
 
         const fontFamilyRules = extractFontFamilyRules();
         const newStyleTag = createNewStyleTag(fontFamilyRules);
 
-        // Schreibe überschriebene Styles komplett neu
         if (existingSheet) {
             existingSheet.parentNode.removeChild(existingSheet);
         }
@@ -134,19 +109,14 @@
         document.head.appendChild(newStyleTag);
     };
 
-    /**
-     * Bewahre Custom Fonts in inline styles
-     */
     const preserveCustomFonts = (element) => {
         if (element == undefined)
             return;
 
-        // Ignoriere Elemente ohne style-Attribut oder font-family
         const inlineStyle = element.getAttribute('style');
         if (!inlineStyle || !inlineStyle.includes('font-family'))
             return;
 
-        // Font family regex für Font (Gruppe 1) und !important Modifier (Gruppe 2)
         const fontFamilyRegex = /font-family\s*:\s*([^;]+?)(\s*!important)?\s*(;|$)/;
         const match = fontFamilyRegex.exec(inlineStyle);
 
@@ -161,59 +131,75 @@
         element.style.setProperty('font-family', currentFontFamily, 'important');
     };
 
-    /**
+    const processInitialElements = () => {
-     * Initialisiere das Script
+        document.querySelectorAll('[style*="font-family"]').forEach(preserveCustomFonts);
-     */
+    };
+
     const init = () => {
-        // Lade Font-Face
         loadFontFace();
 
-        // Warte bis DOM bereit ist
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => {
                 applyCustomFontStyles();
+                processInitialElements();
             });
         } else {
             applyCustomFontStyles();
+            processInitialElements();
         }
 
-        // Beobachte Dokument auf dynamisch hinzugefügte Styles
         let lastStyleSheets = new Set(Array.from(document.styleSheets).map(sheet => sheet.href || sheet.ownerNode?.textContent));
         const observer = new MutationObserver((mutations) => {
             let stylesheetChanged = false;
+            const elementsToProcess = new Set();
 
             mutations.forEach(mutation => {
-                // Fokussiere nur auf <link> und <style> Elemente
                 mutation.addedNodes.forEach(node => {
                     if (node.id === extentionStyleTagId || node.id === headStyleTagId)
                         return;
 
                     const isStylesheet = node.nodeName === 'LINK' && node.rel === 'stylesheet';
                     const isStyleNode = node.nodeName === 'STYLE';
-                    if (!isStylesheet && !isStyleNode)
-                        return;
 
-                    const newStylesheetIdentifier = isStylesheet ? node.href : node.textContent;
+                    if (isStylesheet || isStyleNode) {
-                    if (lastStyleSheets.has(newStylesheetIdentifier))
+                        const newStylesheetIdentifier = isStylesheet ? node.href : node.textContent;
+                        if (!lastStyleSheets.has(newStylesheetIdentifier)) {
+                            stylesheetChanged = true;
+                            lastStyleSheets.add(newStylesheetIdentifier);
+                        }
                         return;
+                    }
 
-                    stylesheetChanged = true;
+                    if (node.nodeType === Node.ELEMENT_NODE) {
-                    lastStyleSheets.add(newStylesheetIdentifier);
+                        if (node.hasAttribute?.('style') && node.getAttribute('style').includes('font-family')) {
+                            elementsToProcess.add(node);
+                        }
+                        node.querySelectorAll?.('[style*="font-family"]').forEach(el => elementsToProcess.add(el));
+                    }
                 });
+
+                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                    const target = mutation.target;
+                    if (target.hasAttribute('style') && target.getAttribute('style').includes('font-family')) {
+                        elementsToProcess.add(target);
+                    }
+                }
             });
 
             if (stylesheetChanged) {
                 applyCustomFontStyles();
             }
 
-            // Bewahre font-families aus style-Attributen
+            elementsToProcess.forEach(preserveCustomFonts);
-            document.querySelectorAll('*').forEach(preserveCustomFonts);
         });
 
-        // Beobachte document DOM-Element und alle neu hinzugefügten Elemente
+        observer.observe(document, {
-        observer.observe(document, { childList: true, subtree: true });
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style']
+        });
     };
 
-    // Starte Initialisierung
     init();
 })();