Utvikling av nettleserutvidelser (Chrome og Edge) · leksjon

Blokkere nettverksforespørsler

Lær å definere regler for blokkering av uønskede nettverksforespørsler, som annonser eller sporingsskript, ved hjelp av `declarativeNetRequest`.

Leksjon 1 av 411 trinn

Blokkere nettverksforespørsler er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Introduksjon til blokkering av forespørsler

Velkommen til endring av nettforespørsler! I denne leksjonen introduseres declarativeNetRequest, et kraftig API for å kontrollere nettverksforespørsler i nettleserutvidelsen.

Du lærer å definere regler for å blokkere uønsket innhold som annonser, sporingsskript eller bestemte ressurser, slik at nettlesingen blir renere og raskere.

Hvorfor blokkere nettverksforespørsler?

Blokkering av nettverksforespørsler handler ikke bare om personvern, men også om ytelse og brukeropplevelse.

Fjern annonser: Blokker forespørsler til annonseservere.
Stopp sporing: Hindre sporingsskript i å lastes inn.
Forbedre ytelsen: Mindre data som lastes ned, betyr raskere sidelasting.
Øk sikkerheten: Blokker skadelige domener eller skadelig innhold.

Deklarativ kontra imperativ

Tradisjonelle annonseblokkere bruker ofte imperativ logikk: JavaScript-kode som kjøres på hver side for å oppdage og blokkere elementer.

declarativeNetRequest er deklarativt. Du definerer regler, og nettleseren håndterer blokkeringen effektivt, ofte uten å vekke JavaScript-koden i utvidelsen. Dette er raskere og bruker færre ressurser!

Manifest-tillatelse for blokkering

For å bruke declarativeNetRequest må utvidelsen deklarere tillatelsen i manifest.json-filen.

Dette forteller nettleseren at utvidelsen har til hensikt å endre nettverksforespørsler.

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

Strukturen til en blokkeringsregel

En blokkeringsregel er et objekt med en id, en action og en condition. Nettleseren kontrollerer disse betingelsene mot hver nettverksforespørsel.

id: Et unikt nummer for regelen.
action: Hva som skal gjøres, for eksempel 'block' eller 'redirect'.
condition: Når handlingen skal brukes, for eksempel 'urlFilter' eller 'resourceTypes'.

Handlingstypen «block»

I denne leksjonen fokuserer vi på handlingen "block". Når en forespørsel samsvarer med en regel med denne handlingen, hindrer nettleseren ganske enkelt forespørselen i å fullføres.

action-delen av regelen ser slik ut:

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

Betingelser: `urlFilter`

Egenskapen urlFilter i en regels condition lar deg angi et mønster som URL-er skal samsvare med. Det ligner på et lite regulært uttrykk.

"*://*.example.com/*" samsvarer med alle underdomener av example.com.
"*://ads.google.com/*" retter seg spesifikt mot Google-annonser.
"*track*" samsvarer med URL-er som inneholder «track».

Betingelser: `resourceTypes`

Du kan også angi hvilke ressurstyper som skal blokkeres, ved å bruke resourceTypes. Dette hjelper deg med å rette blokkeringen mot bestemt innhold som bilder, skript eller skrifter.

Vanlige typer omfatter "script", "image", "stylesheet", "media" og "font".

Legge til dynamiske blokkeringsregler

Se på følgende blokkeringsregel:

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

Hvilke av disse forespørslene blir blokkert?

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.

Hurtigsjekk: Regelsamsvar

Vurder følgende blokkeringsregel:

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

Hvilke av disse forespørslene ville blitt blokkert?

Besvar den i den interaktive leksjonen

Oppsummering: Blokkering av forespørsler

Godt jobbet! Du har lært det grunnleggende om blokkering av nettverksforespørsler med declarativeNetRequest.

Det er et kraftig, effektivt og personvernvennlig API.
Regler består av en id, en action (for eksempel "block") og en condition.
urlFilter og resourceTypes er viktige for å definere betingelser.
Dynamiske regler kan legges til og administreres ved hjelp av updateDynamicRules().

Deretter skal du utforske hvordan du endrer headere!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Blokkere nettverksforespørsler» gratis?

Ja – hele teksten i «Blokkere nettverksforespørsler» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Blokkere nettverksforespørsler»?

Lær å definere regler for blokkering av uønskede nettverksforespørsler, som annonser eller sporingsskript, ved hjelp av `declarativeNetRequest`. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av nettleserutvidelser (Chrome og Edge)?

Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Blokkere nettverksforespørsler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av nettleserutvidelser (Chrome og Edge)-leksjonen?

Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Blokkere nettverksforespørsler
Endre forespørselshoder
Omdirigere og omskrive URL-er
Dynamiske regler og feilsøking av declarativeNetRequest

← Tilbake til Utvikling av nettleserutvidelser (Chrome og Edge)