96 lines
4.0 KiB
JavaScript
96 lines
4.0 KiB
JavaScript
|
|
|
|
function highlight(){
|
|
|
|
|
|
const listOfElements = document.querySelectorAll("*");
|
|
console.log(listOfElements);
|
|
console.log("hallo");
|
|
|
|
detectedWordsOnThisPage = 0;
|
|
|
|
for (let elementNumber = 0; elementNumber < listOfElements.length; elementNumber++) {
|
|
let tag = listOfElements[elementNumber];
|
|
|
|
console.log(elementNumber, tag);
|
|
|
|
if (tag && tag.nodeType === Node.ELEMENT_NODE) { // Überprüfen, ob es ein gültiges Element ist
|
|
const hasChildren = tag.children.length > 0;
|
|
const elementText = tag.textContent ? tag.textContent.trim() : "";
|
|
const hasText = elementText.length > 0;
|
|
|
|
// Wir bearbeiten nur Elemente, die keinen Nachwuchs haben und Text enthalten
|
|
// Warum? Weil sonst innere Tags (wie <b>, <i>) überschrieben und deren Formatierung verloren gehen würden.
|
|
if (!hasChildren && hasText) {
|
|
let targetWord = ["hass", "das", "die", "der", "windows"]; // Das Wort, das unterstrichen werden soll
|
|
|
|
// Den Text des Elements in einzelne Wörter aufteilen
|
|
// Mithilfe eines Regulären Ausdrucks, um auch Satzzeichen am Wortende zu berücksichtigen
|
|
const words = elementText.split(/(\s+)/); // Splittet nach Leerzeichen, behält diese aber als separate Einträge bei
|
|
|
|
let newHTMLContent = '';
|
|
|
|
for (let i = 0; i < words.length; i++) {
|
|
const word = words[i];
|
|
|
|
// Prüfen, ob das aktuelle "Wort" wirklich ein Wort ist (nicht nur Leerzeichen)
|
|
if (word.trim().length === 0) {
|
|
newHTMLContent += word; // Leerzeichen einfach wieder hinzufügen
|
|
continue;
|
|
}
|
|
|
|
// Regulären Ausdruck verwenden, um Satzzeichen zu entfernen und nur das reine Wort zu erhalten
|
|
const cleanWord = word.replace(/[^a-zA-ZäöüÄÖÜß0-9]/g, ''); // Entfernt alle Nicht-Buchstaben/Zahlen
|
|
|
|
// Bedingung: Ist das bereinigte Wort unser Zielwort (Groß-/Kleinschreibung ignorieren)?
|
|
if (targetWord.includes(cleanWord.toLowerCase())) {
|
|
// Wenn ja, umschließe das ursprüngliche Wort (inkl. Satzzeichen) mit dem Unterstreichungs-Span
|
|
newHTMLContent += `<span style="text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 2px; text-decoration-style: wavy; text-underline-offset: 2px;">${word}</span>`;
|
|
detectedWordsOnThisPage += 1;
|
|
} else {
|
|
// Sonst, füge das Wort unverändert hinzu
|
|
newHTMLContent += word;
|
|
}
|
|
}
|
|
|
|
// Setze den neuen, bearbeiteten HTML-Inhalt in das Element ein
|
|
tag.innerHTML = newHTMLContent;
|
|
|
|
console.log("Element bearbeitet. Neuer Inhalt:", tag.innerHTML);
|
|
}
|
|
}
|
|
}
|
|
|
|
chrome.storage.local.set({ 'detectedWords': detectedWordsOnThisPage}); // gezählte Wörter werden gespeichert und später von popup.js aufgerufen
|
|
console.log("erkannte Wörter: ", detectedWordsOnThisPage);
|
|
chrome.storage.local.get(['detectedWords'], function(result){
|
|
if(result.detectedWords) {
|
|
console.log("Wörter in storage: ", result.detectedWords);
|
|
}
|
|
|
|
else{
|
|
console.log("noch keine Wortanzahl vorhanden");
|
|
}
|
|
});
|
|
|
|
|
|
console.log("type of wörter: ", typeof chrome.storage.local.get('detectedWords'));
|
|
}
|
|
|
|
|
|
|
|
chrome.storage.sync.get('checkboxState1', function(data){
|
|
const checkboxState1 = data.checkboxState1 || false;
|
|
if (checkboxState1){
|
|
highlight();
|
|
}
|
|
});
|
|
|
|
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
|
|
if (request.action === "checkboxStatusChanged") {
|
|
console.log("Checkbox-Status geändert, Seite wird neu geladen...");
|
|
// Lade die Seite neu, um die Änderungen anzuwenden
|
|
window.location.reload();
|
|
}
|
|
});
|