Ændring af anmodningsheadere
Implementér regler for at ændre HTTP-anmodningsheadere, så De kan tilpasse adfærd eller godkendelse af udgående anmodninger.
Ændring af anmodningsheadere er en gratis Udvikling af browserudvidelser til Chrome og Edge-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.
Hvad er forespørgselheadere?
Når din browser kommunikerer med et websted, sender den meddelelser, der kaldes HTTP-forespørgsler. Disse forespørgsler indeholder ekstra oplysninger, f.eks. metadata, i noget, der kaldes headere.
Headere fortæller serveren ting som hvilken browser du bruger (User-Agent), hvilken type indhold du forventer (Accept), eller endda godkendelsestokens (Authorization).
Effektiv styring af headere
Vi har lært om declarativeNetRequest til blokering og omdirigering. Den er effektiv, fordi den lader browseren håndtere regler effektivt, uden at din udvidelses JavaScript hele tiden skal køre.
I dag bruger vi den til at ændre disse forespørgselheadere ved at tilføje, ændre eller fjerne dem, før en forespørgsel overhovedet forlader din browser!
Introduktion til `modifyHeaders`
Hvis vi vil ændre headere, bruger vi en bestemt actionType i vores declarativeNetRequest-regler: "modifyHeaders".
Denne handling tager en liste af requestHeaders. Hvert element i listen beskriver én ændring af en header, som du vil foretage.
Forklaring af headerhandlinger
For hver ændring af en header angiver du en operation:
"set": Erstatter værdien i en eksisterende header eller tilføjer headeren, hvis den ikke findes."append": Tilføjer en ny værdi til en header. Hvis headeren allerede findes, får den flere værdier. Hvis ikke, tilføjes den."remove": Sletter en header helt fra forespørgslen.
Nødvendige tilladelser
Hvis du vil bruge declarativeNetRequest til at ændre headere, skal din udvidelse have bestemte tilladelser i sin manifest.json-fil:
"declarativeNetRequest": Den grundlæggende tilladelse til at bruge API'en."declarativeNetRequestWithHostAccess": Påkrævet, hvis dine regler ændrer headere på bestemte websteder (værter). Det er normalt tilfældet!
Tilføj en brugerdefineret header
Lad os tilføje en brugerdefineret header kaldet X-CoddyKit-User til alle udgående forespørgsler. Det kan være nyttigt til at identificere forespørgsler fra din udvidelse.
Denne kode skal placeres i din udvidelses background.js-fil.
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.Gennemgang af reglen
Koden bruger chrome.declarativeNetRequest.updateDynamicRules til at administrere regler. Her er en kort gennemgang:
id: Et entydigt tal for din regel.priority: Afgør, hvilken regel der vinder, hvis flere regler gælder.action: Definerer, hvad der skal gøres. Her er det"modifyHeaders"med voresrequestHeaders.condition: Angiver, hvornår reglen gælder (f.eks.<all_urls>overalt).
Skift User-Agent
Du kan også bruge "set" til at ændre standardheadere. Her ændrer vi User-Agent-headeren for forespørgsler til example.com. Det forfalsker din browsers identitet på dette websted.
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
Nogle gange vil du måske fjerne en header af hensyn til privatlivets fred eller for at forhindre bestemt sporing. Lad os fjerne Referer-headeren fra alle billedforespørgsler.
Referer-headeren fortæller et websted, 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.Hurtigt tjek: Headerhandlinger
Du vil tilføje en API-nøgle som en brugerdefineret header, X-API-Key, til en forespørgsel. Hvis headeren allerede findes, vil du sikre dig, at din nøgle også er til stede, muligvis som en anden værdi, i stedet for at erstatte den eksisterende.
Opsummering og næste trin
Godt gået! Du har lært, hvordan du effektivt ændrer HTTP-forespørgselsheadere ved hjælp af declarativeNetRequest.
- Vi udforskede handlingen
"modifyHeaders". - Vi forstod handlingerne
"set","append"og"remove". - Vi så, hvordan man tilføjer brugerdefinerede headere, ændrer user agents og fjerner følsomme oplysninger.
- Husk de nødvendige tilladelser:
declarativeNetRequestogdeclarativeNetRequestWithHostAccess.
Derefter dykker vi ned i omdirigering og omskrivning af URL'er!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Ændring af anmodningsheadere” gratis?
Ja — hele teksten til “Ændring af anmodningsheadere” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Ændring af anmodningsheadere”?
Implementér regler for at ændre HTTP-anmodningsheadere, så De kan tilpasse adfærd eller godkendelse af udgående anmodninger. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Udvikling af browserudvidelser til Chrome og Edge?
Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Ændring af anmodningsheadere”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Udvikling af browserudvidelser til Chrome og Edge-lektion?
Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Blokering af netværksanmodninger
- Ændring af anmodningsheadere
- Omdirigering og omskrivning af URL'er
- Dynamiske regler og fejlfinding af declarativeNetRequest