PricingLoginStart free
Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Blockera nätverksförfrågningar

Lär er definiera regler för att blockera oönskade nätverksförfrågningar, till exempel annonser eller spårningsskript, med hjälp av `declarativeNetRequest`.

Lektion 1 av 411 steg

Blockera nätverksförfrågningar är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Introduktion till blockering av förfrågningar

Välkomna till modifiering av webbförfrågningar! I den här lektionen introduceras declarativeNetRequest, ett kraftfullt API för att styra nätverksförfrågningar i webbläsartillägg.

Ni får lära er att definiera regler för att blockera oönskat innehåll som annonser, spårningsskript eller specifika resurser, så att webbsurfandet blir renare och snabbare.

Varför blockera nätverksförfrågningar?

Att blockera nätverksförfrågningar handlar inte bara om integritet, utan även om prestanda och användarupplevelse.

  • Ta bort annonser: Blockera förfrågningar till annonsservrar.
  • Stoppa spårare: Förhindra att spårningsskript läses in.
  • Förbättra prestandan: Mindre nedladdad data innebär snabbare sidinläsningar.
  • Förbättra säkerheten: Blockera skadliga domäner eller skadligt innehåll.

Deklarativt kontra imperativt

Traditionella annonsblockerare använder ofta imperativ logik: JavaScript-kod som körs på varje sida för att upptäcka och blockera element.

declarativeNetRequest är deklarativt. Ni definierar regler, och webbläsaren hanterar blockeringen effektivt, ofta utan att aktivera tilläggets JavaScript. Det är snabbare och kräver mindre resurser!

Manifestbehörighet för blockering

För att använda declarativeNetRequest måste tillägget deklarera behörigheten i filen manifest.json.

Detta talar om för webbläsaren att tillägget avser att modifiera nätverksförfrågningar.

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

En blockeringsregels struktur

En blockeringsregel är ett objekt med ett id, en action och ett condition. Webbläsaren kontrollerar dessa villkor mot varje nätverksförfrågan.

  • id: Ett unikt nummer för regeln.
  • action: Vad som ska göras, till exempel 'block' eller 'redirect'.
  • condition: När åtgärden ska tillämpas, till exempel 'urlFilter' eller 'resourceTypes'.

Åtgärdstypen 'Blockera'

I den här lektionen fokuserar vi på åtgärden "block". När en förfrågan matchar en regel med denna åtgärd förhindrar webbläsaren helt enkelt att förfrågan slutförs.

Regelns del action ser ut så här:

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

Villkor: `urlFilter`

Egenskapen urlFilter i en regels condition gör det möjligt att ange ett mönster som URL:er ska matcha. Det fungerar ungefär som ett litet reguljärt uttryck.

  • "*://*.example.com/*" matchar alla underdomäner till example.com.
  • "*://ads.google.com/*" riktar specifikt in sig på Google-annonser.
  • "*track*" matchar URL:er som innehåller 'track'.

Villkor: `resourceTypes`

Ni kan också ange vilka typer av resurser som ska blockeras med hjälp av resourceTypes. Detta hjälper er att rikta in er på specifikt innehåll som bilder, skript eller teckensnitt.

Vanliga typer är "script", "image", "stylesheet", "media" och "font".

Lägga till dynamiska blockeringsregler

Regler kan läggas till dynamiskt av ditt tillägg med chrome.declarativeNetRequest.updateDynamicRules(). Detta görs ofta i ditt bakgrundsskript.

Det här exemplet lägger till en regel som blockerar förfrågningar vars URL innehåller "adserver", specifikt för skript och bilder.

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.

Snabb kontroll: Matchning av regler

Betrakta följande blockeringsregel:

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

Vilka av dessa förfrågningar skulle blockeras?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Blockera förfrågningar

Bra jobbat! Ni har lärt er grunderna i att blockera nätverksförfrågningar med declarativeNetRequest.

  • Det är ett kraftfullt, effektivt och integritetsvänligt API.
  • Regler består av ett id, en action (till exempel "block") och ett condition.
  • urlFilter och resourceTypes är viktiga för att definiera villkor.
  • Dynamiska regler kan läggas till och hanteras med updateDynamicRules().

Härnäst ska ni utforska hur headers kan ändras!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
12
Lektioner
48
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Blockera nätverksförfrågningar” gratis?

Ja – hela texten till ”Blockera nätverksförfrågningar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Blockera nätverksförfrågningar”?

Lär er definiera regler för att blockera oönskade nätverksförfrågningar, till exempel annonser eller spårningsskript, med hjälp av `declarativeNetRequest`. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Blockera nätverksförfrågningar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Blockera nätverksförfrågningar
  2. Ändra förfrågningsheaders
  3. Omdirigera och skriva om URL:er
  4. Dynamiska regler och felsökning av declarativeNetRequest
← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)