highlighter chrome extension

MarkIt Textmarker

Dies ist ein Chrome-Erweiterungslink, mit dem Sie wichtigen Text auf jeder Webseite hervorheben können. Besuchen Sie die Seite in 1 Minute, 1 Woche oder 1 Jahr erneut – Ihre Daten sind immer da.

Technologien

1. (Vanille) JavaScript
2. Google-API

Merkmale

1. Markieren Sie einen beliebigen Text und drücken Sie Befehl+K, um ihn automatisch zu speichern
2. Der Benutzer kann die gespeicherten Markierungen für jede URL mit einem einfachen Befehl löschen: Befehl+Umschalt+A
3. Synchronisiert sich auf allen Geräten – wenn Sie Text auf einem Laptop markieren und dann auf Ihrem Telefon dieselbe Webseite ansehen, sind Ihre Markierungen dort (wenn Sie auf beiden bei Chrome angemeldet sind).

Meine gespeicherte Datenstruktur (Objekt)

 highlights = {
    google.com: {
        text1: ["query selector", index, note, color]
        text2: ["query selector", index, note, color]
    },
    yahoo.com: {
        text3: ["query selector", index, note, color],
        text4: ["query selector", index, note, color]
    },
    https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand: {
        "When an HTML document has been switched to designMode, its document object exposes an execCommand": ["p.summary", 20],
        "A DOMString specifying the name of the command to execute. See Commands for a list of possible commands.": ["p", 0, "example note", #CFFFDF]
    }
}

Wie es funktioniert

Ich habe zwei Skripte, die auf jeder Seite geladen werden. Das erste ist „background.js“, das auf ein bestimmtes Ereignis wartet. Das Ereignis Befehl+K löst eine Funktion aus, die ein Skript in den Browser einfügt (injection_script.js), das ausgewählten Text hervorhebt.

Zum Hervorheben ziehen Sie Ihre Maus über einen Text und drücken Befehl+K. Dadurch wird eine Funktion ausgelöst, die mehrere andere aufruft. Ablauf:

1. Erfasst den ausgewählten Text
2. Schaltet den Designmodus ein, sodass wir vorübergehende Änderungen am DOM vornehmen können
3. Wenn der Hintergrund bereits hervorgehoben ist, müssen wir die Hervorhebung entfernen:
   1. Wählt das < span >-Tag aus, das den Text umgibt, und legt style.backgroundColor = transparent fest (Hervorhebung entfernen).
   2. Ruft das „Highlights“-Objekt aus dem Speicher ab – chrome.storage.get()
   3. Durchläuft alle Schlüssel (das sind die gespeicherten Hervorhebungen), um nach einer Übereinstimmung zu suchen, und löscht sie aus dem Speicher
4. Andernfalls schließen Sie den Text in ein < span > ein und wenden Sie die Hintergrundfarbe an
5. Bei Seitenaktualisierung: „Highlights“ aus dem Speicher abrufen
   1. Wenn für die aktive URL keine Daten vorhanden sind, setzen Sie den Schlüssel auf die aktuelle URL und den Wert auf ein leeres Objekt (aol.com: {}).
   2. Wenn ja, holen Sie sich die Hervorhebungsdatenstruktur aus dem Speicher (chrome.storage.get()).
6. Rufen Sie einen gültigen Abfrageauswahlwert für den ausgewählten Text ab und weisen Sie ihn zu (dieser wird verwendet, um das DOM abzufragen und die Hervorhebungen später anzuwenden. Zur Verdeutlichung sehen Sie sich die Objektstruktur oben an.)
   1. Wenn das übergeordnete Element des hervorgehobenen Texts einen Klassennamen hat, speichern Sie eine Zeichenfolge „element.className“ („p.firstParagraph“, „h2.sectionHeader“ usw.).
   2. Wenn kein Klassenname vorhanden ist, speichern Sie die Zeichenfolge „element“ („p“, „h2“, „li“ usw.).
7. Geben Sie dem Schlüssel (hervorgehobener Text) einen Wert (ein Array mit zwei Werten – erstens den Abfrageselektor und zweitens den Index, an dem der ausgewählte Text im übergeordneten Element vorkam).
   1. Ich speichere den Index der Zeichenfolge, denn wenn ich nur den Text und den Abfrageselektor speichere, sagen wir, Sie haben „the“ unter einem „p“-Tag hervorgehoben, würde beim Anwenden der Hervorhebungen beim Aktualisieren der Seite jedes einzelne Vorkommen von „the“ in a Das „p“-Tag wird hervorgehoben. Durch Hinzufügen des indexOf-Werts kann ich überprüfen, ob die Indizes mit dem DOM übereinstimmen, und erst dann die Hervorhebung anwenden, sodass ich die Hervorhebung auf das richtige Wort anwende.
8. Speichern Sie die aktualisierte Hervorhebungsvariable, die den neuen hervorgehobenen Text enthält, mit chrome.storage.set()
9. Schalten Sie den Designmodus aus.

Die zweite JavaScript-Datei, die auf jeder Seite ausgeführt wird, ist content_script.js. Es prüft, ob ein gespeichertes Objekt namens „Highlights“ vorhanden ist. Ist dies nicht der Fall, bedeutet das, dass der Benutzer noch nie etwas markiert hat. Anschließend wurde ein leeres Objekt erstellt und in Chrome gespeichert.

Wenn ein „Highlights“-Objekt gefunden wird, prüft es, ob für die aktive URL gespeicherte Daten vorhanden sind. Ist dies nicht der Fall, kehrt das Skript zurück.

Wenn für die URL Markierungen gespeichert sind:

1. Die Funktion applyHighlights() wird ausgeführt
2. Es benötigt zwei Parameter, das „Highlights“-Objekt und die aktive URL
3. Durchläuft die Schlüssel des gespeicherten Objekts (die Schlüssel sind die gespeicherten Hervorhebungen, während die Werte dieser Schlüssel ein Array sind, das die Werte querySelector und indexOf enthält)
4. Führt document.body.querySelectorAll() aus, um ein Array aller übereinstimmenden Knoten abzurufen
5. Durchläuft jeden zurückgegebenen Knoten und wenn innerHTML eine „Zeichenfolge“ enthält, die mit dem Objektschlüssel (hervorgehobener Text) UND mit demselben indexOf-Wert übereinstimmt: 1. Führt eine .replace()-Funktion aus, die den übereinstimmenden Text in ein < span >-Tag mit einschließt Inline-Stilattribut für die Hintergrundfarbe

• Randbemerkung: Ich habe ursprünglich jeden DOM-Knoten rekursiv durchgegangen, um nach Übereinstimmungen zu suchen, aber das Speichern des querySelector-Werts und das Vergleichen der HTML-Werte nur der übereinstimmenden Knoten mit meinen gespeicherten Werten geht deutlich schneller.

Upgrades für die nächste Version

1. Speichern Sie die spezifische Zeichenfolge, die Sie markiert haben

• „Laden Sie die jQuery-Bibliothek von jQuery.com herunter“.
• Wenn Sie die zweite „jQuery“ markieren, ist der gespeicherte Wert der der ersten Instanz.
• Dies liegt daran, dass der indexOf-Wert, den ich speichere, nach der ersten Übereinstimmung zurückgegeben wird
• PLAN – Beginnen Sie mit der Zählung des Index nach dem Span-Tag

2. kann nicht über Blockelemente hinweg hervorgehoben werden (wenn Sie die Hervorhebung von einem h2 in ein ap-Tag ziehen, wird nur das h2 registriert)
3. IN BEARBEITUNG: Benutzern erlauben, die Hervorhebungsfarbe auszuwählen

• Derzeit fest codiert

4. Lassen Sie die Anzahl der Highlights und tatsächlichen Highlights für eine Seite in der Erweiterung popup.html anzeigen
5. Einschränkungen/Randfälle: E-Mail, PDFs
6. Ich beantrage Berechtigungen für jede Site. auf die einige Websites den „*“-Zugriff blockieren (cnn.com)
7. Wenn Sie „jQuery“ in einem Element hervorheben und es in einem anderen erneut hervorheben, überschreibt das zweite das erste (da der Schlüssel derselbe ist).
8. Wenn das übergeordnete Element ein Inline-Tag ist, wird der innertext/html-IndexOf nicht registriert (-1) oder die Hervorhebung am Ende des Inline-Tags beendet. Suchen Sie den Index des Span-Tags und starten Sie dort den IndexOf
9. Minimierungsmodus – Reduzieren Sie das Dokument nur auf die übergeordneten Elemente der gespeicherten Hervorhebungen

Gelöste Probleme

1. Speichern von Highlights über Inline-Element-Tags (a, em, st usw.)

• Vorher wurde nur der Text vor dem Inline-Tag gespeichert, da ich den innerText gespeichert habe
• Ich habe es gelöst, indem ich stattdessen das innerHTML gespeichert habe
• Das Problem, das sich aus dieser Änderung ergab, bestand darin, dass ich den IndexOf des innerenTexts speicherte, der die Hervorhebungen erneut auf Standardtext innerhalb eines Textelements anwendete, wie z. B. ein „p“-Tag. Der IndexOf unterscheidet sich jedoch für Elemente in der Nähe von Inline-Elementen, da der IndexOf jedes Zeichen in den Tags zählt.
• Um dieses Problem zu lösen, vergleiche ich die Werte innerText.indexOf UND innerHTML.indexOf und vergleiche jeden mit passenden Knoten, wenn ich Hervorhebungen auf Seiten anwende, die ein Benutzer erneut besucht.

2. Wenn Sie auf einen Abschnitt doppelklickten, um ihn hervorzuheben, wurden die indexOf-Werte nicht registriert und daher konnte meine App die Hervorhebungen nicht erneut anwenden

• Um es zu lösen, habe ich die Methoden .toString() und .trim() zum indexOf(...) hinzugefügt.

3. Das Hervorheben eines < a >-Tags würde den Link beim Laden der Seite entfernen.

Zukünftige Upgrades

## Beispielbild

Randfälle

1. Wenn sich Klassennamen ändern
   • Lösung: Wenn der Klassenname nicht im DOM vorhanden ist, entfernen Sie den Klassennamen aus der Abfrageauswahl und durchsuchen Sie einfach die Element-Tag-Knoten
2. Wenn der Inhalt durch eine Schaltfläche ausgeblendet wird, werden meine Hervorhebungen nicht registriert, da on_load durchsucht wird und der Inhalt erst nach einem Browserereignis angezeigt wird (aus diesem Grund funktioniert es bei E-Mails nicht).

Erlauben Sie jemandem den Zugriff auf alle Hervorhebungen in der Datei „popup.html“. Erlauben Sie Benutzern, die Hervorhebungsfarbe zu ändern. Beheben Sie den Fehler bei der Hervorhebung von Inline-Elementen