Endre forespørselshoder
Implementer regler for å endre HTTP-forespørselshoder, slik at du kan tilpasse funksjonalitet eller autentisering for utgående forespørsler.
Endre forespørselshoder er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) på CoddyKit. Dette er leksjon 2 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.
Hva er forespørselsheadere?
Når nettleseren kommuniserer med et nettsted, sender den meldinger som kalles HTTP-forespørsler. Disse forespørslene inneholder ekstra informasjon, for eksempel metadata, i noe som kalles headere.
Headere forteller serveren blant annet hvilken nettleser du bruker (User-Agent), hvilken type innhold du forventer (Accept), og eventuelle autentiseringstokener (Authorization).
Effektiv styring av headere
Vi har lært om declarativeNetRequest for blokkering og omdirigering. Det er kraftig fordi nettleseren kan håndtere regler effektivt uten at JavaScript-koden i utvidelsen må kjøre hele tiden.
I dag skal vi bruke det til å endre disse forespørselsheaderne ved å legge dem til, endre dem eller fjerne dem før en forespørsel i det hele tatt forlater nettleseren!
Introduksjon til `modifyHeaders`
For å endre headere bruker vi en bestemt actionType i declarativeNetRequest-reglene våre: "modifyHeaders".
Denne handlingen tar imot en rekke med requestHeaders. Hvert element i rekken beskriver én endring av en header som du vil utføre.
Forklaring av headeroperasjoner
For hver headerendring angir du en operation:
"set": Erstatter verdien til en eksisterende header eller legger den til hvis den ikke finnes."append": Legger til en ny verdi i en header. Hvis headeren allerede finnes, får den flere verdier. Hvis ikke, legges den til."remove": Sletter en header fullstendig fra forespørselen.
Nødvendige tillatelser
For å bruke declarativeNetRequest til å endre headere trenger utvidelsen bestemte tillatelser i filen manifest.json:
"declarativeNetRequest": Den grunnleggende tillatelsen for å bruke API-et."declarativeNetRequestWithHostAccess": Nødvendig hvis reglene endrer headere på bestemte nettsteder (verter). Dette er vanligvis tilfelle!
Legg til en egendefinert header
La oss legge til en egendefinert header kalt X-CoddyKit-User i alle utgående forespørsler. Dette kan være nyttig for å identifisere forespørsler fra utvidelsen.
Denne koden skal legges i filen background.js i utvidelsen.
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.Gjennomgang av regelen
Koden bruker chrome.declarativeNetRequest.updateDynamicRules til å administrere regler. Her er en rask gjennomgang:
id: Et unikt nummer for regelen.priority: Bestemmer hvilken regel som vinner hvis flere regler gjelder.action: Definerer hva som skal gjøres. Her er det"modifyHeaders"med vårrequestHeaders.condition: Angir når regelen gjelder (for eksempel<all_urls>for alle steder).
Endre User-Agent
Du kan også bruke "set" til å endre standardheadere. Her skal vi endre User-Agent-headeren for forespørsler til example.com. Dette forfalsker nettleserens identitet for dette nettstedet.
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.Fjern en header
Noen ganger kan du ønske å fjerne en header av hensyn til personvern eller for å hindre bestemt sporing. La oss fjerne Referer-headeren for alle bildeforespørsler.
Referer-headeren forteller et nettsted hvor du kom fra.
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.Hurtigsjekk: Headeroperasjoner
Du vil legge til en API-nøkkel som en egendefinert header, X-API-Key, i en forespørsel. Hvis headeren allerede finnes, vil du sørge for at nøkkelen din også er med, eventuelt som en ekstra verdi, i stedet for å erstatte den eksisterende.
Oppsummering og neste trinn
Godt jobbet! Du har lært hvordan du effektivt endrer HTTP-forespørselsheadere ved hjelp av declarativeNetRequest.
- Vi utforsket handlingen
"modifyHeaders". - Vi lærte om operasjonene
"set","append"og"remove". - Vi så hvordan du kan legge til egendefinerte headere, endre brukeragenter og fjerne sensitiv informasjon.
- Husk de nødvendige tillatelsene:
declarativeNetRequestogdeclarativeNetRequestWithHostAccess.
Deretter skal vi se nærmere på omdirigering og omskriving av URL-er!
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
Ofte stilte spørsmål
Er leksjonen «Endre forespørselshoder» gratis?
Ja – hele teksten i «Endre forespørselshoder» 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 «Endre forespørselshoder»?
Implementer regler for å endre HTTP-forespørselshoder, slik at du kan tilpasse funksjonalitet eller autentisering for utgående forespørsler. 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 2 av 4.
Hvor lang tid tar leksjonen «Endre forespørselshoder»?
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