PricingLoginStart free
Browserextensies ontwikkelen (Chrome en Edge) · Les

Netwerkverzoeken blokkeren

Leer regels definiëren voor het blokkeren van ongewenste netwerkverzoeken, zoals advertenties of trackingscripts, met `declarativeNetRequest`.

Les 1 van 411 stappen

Netwerkverzoeken blokkeren is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Inleiding tot het blokkeren van verzoeken

Welkom bij het aanpassen van webverzoeken! In deze les maak je kennis met declarativeNetRequest, een krachtige API waarmee je netwerkverzoeken in je browserextensie kunt beheren.

Je leert regels definiëren om ongewenste inhoud, zoals advertenties, volgscripts of specifieke bronnen, te blokkeren. Zo wordt surfen schoner en sneller.

Waarom netwerkverzoeken blokkeren?

Netwerkverzoeken blokkeren gaat niet alleen om privacy, maar ook om prestaties en de gebruikerservaring.

  • Advertenties verwijderen: Blokkeer verzoeken naar advertentieservers.
  • Volgers stoppen: Voorkom dat volgscripts worden geladen.
  • Prestaties verbeteren: Minder gedownloade gegevens betekenen sneller ladende pagina's.
  • Beveiliging verbeteren: Blokkeer schadelijke domeinen of inhoud.

Declaratief versus imperatief

Traditionele adblockers gebruiken vaak imperatieve logica: JavaScript-code die op elke pagina wordt uitgevoerd om elementen te detecteren en te blokkeren.

declarativeNetRequest is declaratief. Je definieert regels en de browser verwerkt het blokkeren efficiënt, vaak zonder de JavaScript-code van je extensie te activeren. Dit is sneller en gebruikt minder bronnen!

Manifestmachtiging voor blokkeren

Om declarativeNetRequest te gebruiken, moet je extensie de machtiging declareren in het bestand manifest.json.

Hiermee geef je de browser aan dat je extensie netwerkverzoeken wil aanpassen.

{
  "manifest_version": 3,
  "name": "My Blocker",
  "version": "1.0",
  "permissions": [
    "declarativeNetRequest"
  ]
}

Opbouw van een blokkeerregel

Een blokkeerregel is een object met een id, een action en een condition. De browser controleert deze voorwaarden voor elk netwerkverzoek.

  • id: Een uniek nummer voor de regel.
  • action: Wat er moet gebeuren (bijvoorbeeld 'block' of 'redirect').
  • condition: Wanneer de actie moet worden toegepast (bijvoorbeeld 'urlFilter' of 'resourceTypes').

Het actietype 'Block'

In deze les richten we ons op de actie "block". Wanneer een verzoek overeenkomt met een regel met deze actie, voorkomt de browser eenvoudig dat het verzoek wordt voltooid.

Het onderdeel action van je regel ziet er zo uit:

{
  "action": {
    "type": "block"
  }
}

Voorwaarden: `urlFilter`

Met de eigenschap urlFilter in de condition van een regel kun je een patroon opgeven waaraan URL's moeten voldoen. Het lijkt op een kleine reguliere expressie.

  • "*://*.example.com/*" komt overeen met elk subdomein van example.com.
  • "*://ads.google.com/*" richt zich specifiek op Google-advertenties.
  • "*track*" komt overeen met URL's die 'track' bevatten.

Voorwaarden: `resourceTypes`

Je kunt ook opgeven welke typen bronnen moeten worden geblokkeerd met resourceTypes. Zo kun je specifieke inhoud, zoals afbeeldingen, scripts of lettertypen, selecteren.

Veelvoorkomende typen zijn "script", "image", "stylesheet", "media" en "font".

Dynamische blokkeerregels toevoegen

Regels kunnen dynamisch door je extensie worden toegevoegd met chrome.declarativeNetRequest.updateDynamicRules(). Dit gebeurt vaak in je achtergrondscripts.

Dit voorbeeld voegt een regel toe die verzoeken blokkeert waarin "adserver" in de URL voorkomt, specifiek voor scripts en afbeeldingen.

console.log("Background script running.");

const BLOCK_RULE_ID = 1;

chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [BLOCK_RULE_ID], // Remove if already exists
    addRules: [{
      id: BLOCK_RULE_ID,
      priority: 1,
      action: { type: "block" },
      condition: {
        urlFilter: "*://*adserver*/*",
        resourceTypes: ["script", "image"]
      }
    }]
  }, () => {
    if (chrome.runtime.lastError) {
      console.error("Error updating rules: ", chrome.runtime.lastError);
    } else {
      console.log("Blocking rule added!");
    }
  });
});

// To test, visit a page with 'adserver' in script/image URLs.

Snelle controle: regels koppelen

Bekijk de volgende blokkeerregel:

{ "id": 2, "priority": 1, "action": { "type": "block" }, "condition": { "urlFilter": "*://*.tracker.com/*", "resourceTypes": ["script", "image"] } }

Welke van deze verzoeken zouden worden geblokkeerd?

Beantwoord dit in de interactieve les

Samenvatting: verzoeken blokkeren

Goed gedaan! Je hebt de basis geleerd van het blokkeren van netwerkverzoeken met declarativeNetRequest.

  • Het is een krachtige, efficiënte en privacyvriendelijke API.
  • Regels bestaan uit een id, action (bijvoorbeeld "block") en condition.
  • urlFilter en resourceTypes zijn belangrijk voor het definiëren van voorwaarden.
  • Dynamische regels kunnen worden toegevoegd en beheerd met updateDynamicRules().

Vervolgens ga je kopteksten aanpassen!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
12
Lessen
48
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “Netwerkverzoeken blokkeren” gratis?

Ja — de volledige tekst van “Netwerkverzoeken blokkeren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat leer ik in “Netwerkverzoeken blokkeren”?

Leer regels definiëren voor het blokkeren van ongewenste netwerkverzoeken, zoals advertenties of trackingscripts, met `declarativeNetRequest`. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Browserextensies ontwikkelen (Chrome en Edge) te beginnen?

Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Netwerkverzoeken blokkeren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Browserextensies ontwikkelen (Chrome en Edge)?

Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Netwerkverzoeken blokkeren
  2. Requestheaders aanpassen
  3. URL's omleiden en herschrijven
  4. Dynamische regels en debugging van declarativeNetRequest
← Terug naar Browserextensies ontwikkelen (Chrome en Edge)