Requestheaders aanpassen
Implementeer regels om HTTP-requestheaders aan te passen, zodat u aangepast gedrag of authenticatie voor uitgaande verzoeken kunt instellen.
Requestheaders aanpassen is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.
Wat zijn verzoekkopteksten?
Wanneer je browser met een website communiceert, verstuurt hij berichten die HTTP-verzoeken worden genoemd. Deze verzoeken bevatten extra informatie, zoals metagegevens, in iets dat kopteksten wordt genoemd.
Kopteksten vertellen de server bijvoorbeeld welke browser je gebruikt (User-Agent), welk type inhoud je verwacht (Accept) en zelfs authenticatietokens (Authorization).
Efficiënt beheer van kopteksten
We hebben declarativeNetRequest gebruikt voor het blokkeren en omleiden. Het is krachtig omdat de browser regels efficiënt kan verwerken zonder dat de JavaScript van je extensie steeds hoeft te worden uitgevoerd.
Vandaag gebruiken we het om deze verzoekkopteksten te wijzigen door ze toe te voegen, aan te passen of te verwijderen voordat een verzoek je browser verlaat!
Kennismaken met `modifyHeaders`
Om kopteksten te wijzigen gebruiken we een specifiek actionType binnen onze declarativeNetRequest-regels: "modifyHeaders".
Deze actie gebruikt een reeks requestHeaders. Elk item in deze reeks beschrijft één wijziging aan een koptekst die je wilt uitvoeren.
Bewerkingen van kopteksten uitgelegd
Voor elke wijziging aan een koptekst geef je een operation op:
"set": Vervangt de waarde van een bestaande koptekst of voegt de koptekst toe als deze niet bestaat."append": Voegt een nieuwe waarde toe aan een koptekst. Als de koptekst al bestaat, krijgt deze meerdere waarden. Anders wordt de koptekst toegevoegd."remove": Verwijdert een koptekst volledig uit het verzoek.
Essentiële machtigingen
Om declarativeNetRequest te gebruiken voor het wijzigen van kopteksten, heeft je extensie specifieke machtigingen nodig in het manifest.json-bestand:
"declarativeNetRequest": De basismachtiging om de API te gebruiken."declarativeNetRequestWithHostAccess": Nodig als je regels kopteksten wijzigen op specifieke websites (hosts). Meestal is dat het geval!
Een aangepaste koptekst toevoegen
We voegen een aangepaste koptekst met de naam X-CoddyKit-User toe aan alle uitgaande verzoeken. Dit kan nuttig zijn om verzoeken van je extensie te herkennen.
Deze code hoort in het background.js-bestand van je extensie.
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.De regel ontleden
De code gebruikt chrome.declarativeNetRequest.updateDynamicRules om regels te beheren. Hieronder volgt een korte uitleg:
id: Een uniek nummer voor je regel.priority: Bepaalt welke regel wint als meerdere regels van toepassing zijn.action: Bepaalt wat er moet gebeuren. Hier is dat"modifyHeaders"met onzerequestHeaders.condition: Geeft aan wanneer de regel van toepassing is (bijvoorbeeld<all_urls>voor overal).
De User-Agent wijzigen
Je kunt "set" ook gebruiken om standaardkopteksten te wijzigen. Hier passen we de koptekst User-Agent aan voor verzoeken naar example.com. Hierdoor doet je browser zich tegenover die site voor als iets anders.
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.Een koptekst verwijderen
Soms wil je een koptekst verwijderen vanwege privacyredenen of om bepaalde tracking te voorkomen. We verwijderen de koptekst Referer voor alle afbeeldingsverzoeken.
De koptekst Referer vertelt een website waar je vandaan kwam.
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.Snelle controle: bewerkingen van kopteksten
Je wilt een API-sleutel als aangepaste koptekst, X-API-Key, aan een verzoek toevoegen. Als de koptekst al bestaat, wil je zeker weten dat jouw sleutel ook aanwezig is, mogelijk als tweede waarde, in plaats van een bestaande waarde te vervangen.
Samenvatting en volgende stappen
Goed gedaan! Je hebt geleerd hoe je HTTP-verzoekkopteksten krachtig kunt wijzigen met declarativeNetRequest.
- We hebben de actie
"modifyHeaders"bekeken. - Je hebt de bewerkingen
"set","append"en"remove"leren kennen. - Je hebt gezien hoe je aangepaste kopteksten toevoegt, user-agents wijzigt en gevoelige informatie verwijdert.
- Vergeet de benodigde machtigingen niet:
declarativeNetRequestendeclarativeNetRequestWithHostAccess.
Vervolgens duiken we in het omleiden en herschrijven van URL's!
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Requestheaders aanpassen” gratis?
Ja — de volledige tekst van “Requestheaders aanpassen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.
Wat leer ik in “Requestheaders aanpassen”?
Implementeer regels om HTTP-requestheaders aan te passen, zodat u aangepast gedrag of authenticatie voor uitgaande verzoeken kunt instellen. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Browserextensies ontwikkelen (Chrome en Edge) te beginnen?
Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Requestheaders aanpassen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Browserextensies ontwikkelen (Chrome en Edge)?
Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Netwerkverzoeken blokkeren
- Requestheaders aanpassen
- URL's omleiden en herschrijven
- Dynamische regels en debugging van declarativeNetRequest