De DOM van webpagina's aanpassen

Welkom bij het aanpassen van de inhoud van webpagina's! In deze les leer je hoe je met je extensie kunt veranderen wat gebruikers op een website zien.

We gaan dieper in op het Document Object Model (DOM), een soort boomstructuur die alle elementen op een webpagina voorstelt. De contentscripts van je extensie kunnen met deze boomstructuur werken.

Voordat je een element kunt wijzigen, moet je het vinden! JavaScript biedt verschillende manieren om elementen in de DOM te selecteren.

• document.querySelector(): Vindt het eerste element dat overeenkomt met een CSS-selector.
• document.querySelectorAll(): Vindt alle elementen die overeenkomen met een CSS-selector.
• document.getElementById(): Vindt een element aan de hand van de unieke ID.

Dit zijn je belangrijkste hulpmiddelen om specifieke onderdelen van een webpagina te selecteren.

Laten we bekijken hoe je een element ophaalt. Stel je voor dat een webpagina een alinea met de ID 'myParagraph' en meerdere andere alinea's bevat.

Probeer deze code uit te voeren:

Zodra je een element hebt, is het eenvoudig om de tekst ervan te wijzigen. Je kunt de eigenschap textContent gebruiken.

textContent stelt de tekstinhoud van de opgegeven node en al diens afstammelingen in of geeft deze terug. Deze eigenschap heeft over het algemeen de voorkeur boven innerText vanwege de prestaties en beveiliging.

Laten we de tekst van de eerste kop op een pagina bijwerken. Dit is een veelvoorkomende taak voor extensies die informatie of waarschuwingen willen toevoegen.

Wat denk je dat dit met de hoofdkop van de pagina zal doen?

Elementen hebben vaak attributen zoals src voor afbeeldingen, href voor koppelingen of class voor opmaak. Ook deze kun je wijzigen!

• element.setAttribute(name, value): Voegt een attribuut toe of werkt het bij.
• element.removeAttribute(name): Verwijdert een attribuut.
• element.classList.add(className): Voegt een CSS-klasse toe.
• element.classList.remove(className): Verwijdert een CSS-klasse.

Laten we de bron van een afbeelding wijzigen en een klasse aan een alinea toevoegen. Stel je voor dat je een tijdelijke afbeelding wilt vervangen of bepaalde tekst wilt markeren.

Probeer dit voorbeeld uit te voeren:

Extensies kunnen ook volledig nieuwe inhoud aan een pagina toevoegen! Zo kun je aangepaste knoppen, zijbalken of meldingen toevoegen.

• document.createElement(tagName): Maakt een nieuw elementknooppunt.
• parentNode.appendChild(childNode): Voegt een knooppunt toe als laatste kind van een ouderknooppunt.
• parentNode.prepend(childNode): Voegt een knooppunt toe als eerste kind van een ouderknooppunt.
• parentNode.insertBefore(newNode, referenceNode): Voegt een knooppunt vóór een referentieknooppunt in.

Laten we een nieuw div-element maken en dit helemaal bovenaan de body van de webpagina toevoegen.

Dit laat zien hoe een extensie naadloos nieuwe UI-elementen kan integreren.

Goed gedaan! Je hebt de belangrijkste technieken geleerd om met content scripts de structuur en inhoud van een webpagina te gebruiken en te wijzigen.

• Je kunt elementen vinden met querySelector, querySelectorAll en getElementById.
• Je kunt tekst wijzigen met textContent.
• Je kunt attributen en klassen aanpassen met setAttribute, removeAttribute, classList.add en classList.remove.
• Je kunt nieuwe elementen maken en invoegen met createElement en methoden zoals appendChild of prepend.
• Je kunt elementen verwijderen met element.remove().

Met deze krachtige hulpmiddelen kun je de browse-ervaring van de gebruiker echt aanpassen. Vervolgens bekijken we hoe je met de gegevens op deze pagina's kunt werken!