0Pricing
Browser Extensions Development (Chrome & Edge) · Leçon

Modifier les en-têtes des requêtes

Mettez en œuvre des règles pour modifier les en-têtes des requêtes HTTP, afin d’autoriser un comportement personnalisé ou une authentification pour les requêtes sortantes.

Modifier les en-têtes des requêtes est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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 our requestHeaders.
  • 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: declarativeNetRequest and declarativeNetRequestWithHostAccess.

Next, we'll dive into redirecting and rewriting URLs!

Questions Fréquemment Posées

La leçon « Modifier les en-têtes des requêtes » est-elle gratuite ?

Oui — le texte complet de « Modifier les en-têtes des requêtes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modifier les en-têtes des requêtes » ?

Mettez en œuvre des règles pour modifier les en-têtes des requêtes HTTP, afin d’autoriser un comportement personnalisé ou une authentification pour les requêtes sortantes. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?

Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Modifier les en-têtes des requêtes » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?

Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Bloquer les requêtes réseau
  2. Modifier les en-têtes des requêtes
  3. Rediriger et réécrire les URL
  4. Règles dynamiques et débogage de declarativeNetRequest
← Retour à Browser Extensions Development (Chrome & Edge)