Akamaru/Userscripts
1
0
Fork 0
Code Issues Activity

Verbessere Country Flag Fixer

Browse Source
This commit is contained in:
Akamaru
2025-10-12 16:02:56 +02:00
parent c929075fab
commit 36ae2acc3d
1 changed files with 36 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
country-flag-fixer.user.js
View File

@@ -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');
};
/**
* Initialisiere das Script
*/
const processInitialElements = () => {
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;
if (isStylesheet || isStyleNode) {
const newStylesheetIdentifier = isStylesheet ? node.href : node.textContent;
if (lastStyleSheets.has(newStylesheetIdentifier))
return;
if (!lastStyleSheets.has(newStylesheetIdentifier)) {
stylesheetChanged = true;
lastStyleSheets.add(newStylesheetIdentifier);
}
return;
}
if (node.nodeType === Node.ELEMENT_NODE) {
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
document.querySelectorAll('*').forEach(preserveCustomFonts);
elementsToProcess.forEach(preserveCustomFonts);
});
// Beobachte document DOM-Element und alle neu hinzugefügten Elemente
observer.observe(document, { childList: true, subtree: true });
observer.observe(document, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style']
});
};
// Starte Initialisierung
init();
})();