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

Ändra förfrågningsheaders

Implementera regler för att ändra HTTP-förfrågningars headers och möjliggöra anpassat beteende eller autentisering för utgående förfrågningar.

Lektion 2 av 411 steg

Ändra förfrågningsheaders är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 2 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.

Vad är request headers?

När webbläsaren kommunicerar med en webbplats skickar den meddelanden som kallas HTTP-förfrågningar. Dessa förfrågningar innehåller extra information, till exempel metadata, i något som kallas headers.

Headers talar om för servern bland annat vilken webbläsare ni använder (User-Agent), vilken typ av innehåll ni förväntar er (Accept) och till och med autentiseringstoken (Authorization).

Effektiv hantering av headers

Vi har lärt oss om declarativeNetRequest för att blockera och omdirigera. Det är kraftfullt eftersom webbläsaren kan hantera regler effektivt utan att tilläggets JavaScript alltid behöver köras.

I dag använder vi det för att ändra dessa request headers genom att lägga till, ändra eller ta bort dem innan en förfrågning ens lämnar webbläsaren!

Introduktion till `modifyHeaders`

För att ändra headers använder vi en specifik actionType i våra declarativeNetRequest-regler: "modifyHeaders".

Denna åtgärd tar emot en array med requestHeaders. Varje objekt i arrayen beskriver en enskild headerändring som ni vill utföra.

Förklaring av headeråtgärder

För varje headerändring anger ni en operation:

"set": Ersätter värdet för en befintlig header eller lägger till headern om den inte finns.
"append": Lägger till ett nytt värde i en header. Om headern redan finns får den flera värden. Annars läggs headern till.
"remove": Tar bort en header helt från förfrågningen.

Nödvändiga behörigheter

För att använda declarativeNetRequest för att ändra headers behöver tillägget vissa behörigheter i filen manifest.json:

"declarativeNetRequest": Den grundläggande behörigheten för att använda API:et.
"declarativeNetRequestWithHostAccess": Behövs om era regler ändrar headers på specifika webbplatser (värdar). Så är vanligtvis fallet!

Lägg till en anpassad header

Vi lägger till en anpassad header med namnet X-CoddyKit-User i alla utgående förfrågningar. Det kan vara användbart för att identifiera förfrågningar från ert tillägg.

Den här koden placeras i tilläggets fil background.js.

chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    id: 1,
    priority: 1,
    action: {
      type: "modifyHeaders",
      requestHeaders: [{
        header: "X-CoddyKit-User",
        operation: "set",
        value: "CoddyKitStudent"
      }]
    },
    condition: {
      urlFilter: "<all_urls>",
      resourceTypes: ["main_frame", "sub_frame", "xmlhttprequest"]
    }
  }]
});
// In a real extension, this runs once on install/update.
// You'd observe the header in your browser's DevTools Network tab.

Granska regeln

Koden använder chrome.declarativeNetRequest.updateDynamicRules för att hantera regler. Här följer en kort genomgång:

id: Ett unikt nummer för regeln.
priority: Avgör vilken regel som vinner om flera regler gäller.
action: Anger vad som ska göras. Här används "modifyHeaders" med vår requestHeaders.
condition: Anger när regeln gäller (till exempel <all_urls> överallt).

Ändra User-Agent

Ni kan även använda "set" för att ändra standardheaders. Här ändrar vi headern User-Agent för förfrågningar till example.com. Det förfalskar webbläsarens identitet på den webbplatsen.

chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [2],
  addRules: [{
    id: 2,
    priority: 1,
    action: {
      type: "modifyHeaders",
      requestHeaders: [{
        header: "User-Agent",
        operation: "set",
        value: "CoddyKitBrowser/1.0 (Extension)"
      }]
    },
    condition: {
      urlFilter: "*://example.com/*",
      resourceTypes: ["main_frame", "sub_frame"]
    }
  }]
});
// This rule would change the User-Agent for example.com.

Ta bort en header

Ibland kan ni vilja ta bort en header av integritetsskäl eller för att förhindra viss spårning. Vi tar bort headern Referer från alla bildförfrågningar.

Headern Referer talar om för en webbplats varifrån ni kom.

chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [3],
  addRules: [{
    id: 3,
    priority: 1,
    action: {
      type: "modifyHeaders",
      requestHeaders: [{
        header: "Referer",
        operation: "remove"
      }]
    },
    condition: {
      urlFilter: "<all_urls>",
      resourceTypes: ["image"]
    }
  }]
});
// This rule would remove the Referer header for image requests.

Snabb kontroll: Headeråtgärder

Ni vill lägga till en API-nyckel som en anpassad header, X-API-Key, i en förfrågning. Om headern redan skulle finnas vill ni se till att er nyckel också finns med, eventuellt som ett andra värde, i stället för att ersätta ett befintligt värde.

Besvara frågan i den interaktiva lektionen

Sammanfattning och nästa steg

Bra jobbat! Ni har lärt er att på ett kraftfullt sätt ändra HTTP request headers med declarativeNetRequest.

Vi utforskade åtgärden "modifyHeaders".
Vi gick igenom åtgärderna "set", "append" och "remove".
Vi såg hur man lägger till anpassade headers, ändrar user agents och tar bort känslig information.
Kom ihåg de nödvändiga behörigheterna: declarativeNetRequest och declarativeNetRequestWithHostAccess.

Härnäst går vi igenom hur URL:er omdirigeras och skrivs om!

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 gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Ändra förfrågningsheaders” gratis?

Ja – hela texten till ”Ändra förfrågningsheaders” 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 ”Ändra förfrågningsheaders”?

Implementera regler för att ändra HTTP-förfrågningars headers och möjliggöra anpassat beteende eller autentisering för utgående förfrågningar. 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 2 av 4.

Hur lång tid tar lektionen ”Ändra förfrågningsheaders”?

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

Blockera nätverksförfrågningar
Ändra förfrågningsheaders
Omdirigera och skriva om URL:er
Dynamiska regler och felsökning av declarativeNetRequest

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)