Modificación de encabezados de solicitudes
Implemente reglas para modificar los encabezados de las solicitudes HTTP, lo que permite personalizar el comportamiento o la autenticación de las solicitudes salientes.
Modificación de encabezados de solicitudes es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What are Request Headers?
When your browser talks to a website, it sends messages called HTTP requests. These requests carry extra info, like metadata, in something called headers.
Headers tell the server things like what browser you're using (User-Agent), what kind of content you expect (Accept), or even authentication tokens (Authorization).
Efficient Header Control
We learned about declarativeNetRequest for blocking and redirecting. It's powerful because it lets the browser handle rules efficiently, without your extension's JavaScript always running.
Today, we'll use it to modify these request headers, adding, changing, or removing them before a request even leaves your browser!
Introducing `modifyHeaders`
To change headers, we use a specific actionType within our declarativeNetRequest rules: "modifyHeaders".
This action takes an array of requestHeaders. Each item in this array describes a single header modification you want to make.
Header Operations Explained
For each header modification, you specify an operation:
"set": Replaces an existing header's value or adds it if it doesn't exist."append": Adds a new value to a header. If the header already exists, it will have multiple values. If not, it adds it."remove": Deletes a header entirely from the request.
Essential Permissions
To use declarativeNetRequest for header modification, your extension needs specific permissions in its manifest.json file:
"declarativeNetRequest": The basic permission to use the API."declarativeNetRequestWithHostAccess": Needed if your rules modify headers on specific websites (hosts). This is usually the case!
Add a Custom Header
Let's add a custom header called X-CoddyKit-User to all outgoing requests. This could be useful for identifying requests from your extension.
This code goes into your extension's background.js file.
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.Dissecting the Rule
The code uses chrome.declarativeNetRequest.updateDynamicRules to manage rules. Here's a quick breakdown:
id: A unique number for your rule.priority: Determines which rule wins if multiple rules apply.action: Defines what to do. Here,"modifyHeaders"with ourrequestHeaders.condition: Specifies when the rule applies (e.g.,<all_urls>for everywhere).
Change the User-Agent
You can use "set" to change standard headers too. Here, we'll modify the User-Agent header for requests going to example.com. This spoofs your browser's identity for that site.
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.Remove a Header
Sometimes, you might want to remove a header for privacy or to prevent certain tracking. Let's remove the Referer header for all image requests.
The Referer header tells a website where you came from.
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.Quick Check: Header Operations
You want to add an API key as a custom header, X-API-Key, to a request. If the header somehow already exists, you want to make sure your key is also present, possibly as a second value, rather than replacing an existing one.
Recap & Next Steps
Great job! You've learned how to powerfully modify HTTP request headers using declarativeNetRequest.
- We explored the
"modifyHeaders"action. - Understood the
"set","append", and"remove"operations. - Saw how to add custom headers, change user agents, and remove sensitive info.
- Remember the necessary permissions:
declarativeNetRequestanddeclarativeNetRequestWithHostAccess.
Next, we'll dive into redirecting and rewriting URLs!
Preguntas frecuentes
¿La lección «Modificación de encabezados de solicitudes» es gratis?
Sí — el texto completo de «Modificación de encabezados de solicitudes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
¿Qué aprenderé en «Modificación de encabezados de solicitudes»?
Implemente reglas para modificar los encabezados de las solicitudes HTTP, lo que permite personalizar el comportamiento o la autenticación de las solicitudes salientes. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?
No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Modificación de encabezados de solicitudes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?
Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Bloqueo de solicitudes de red
- Modificación de encabezados de solicitudes
- Redirección y reescritura de URL
- Reglas dinámicas y depuración de declarativeNetRequest