Browser Extensions Development (Chrome & Edge) · บทเรียน

การแก้ไขส่วนหัวคำขอ

สร้างกฎเพื่อแก้ไขส่วนหัวของคำขอ HTTP ทำให้กำหนดพฤติกรรมแบบกำหนดเองหรือการยืนยันตัวตนสำหรับคำขอขาออกได้

บทเรียน 2 จาก 411 ขั้นตอน

การแก้ไขส่วนหัวคำขอ เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

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!

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
12
บทเรียน
48

คำถามที่พบบ่อย

บทเรียน “การแก้ไขส่วนหัวคำขอ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแก้ไขส่วนหัวคำขอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแก้ไขส่วนหัวคำขอ”

สร้างกฎเพื่อแก้ไขส่วนหัวของคำขอ HTTP ทำให้กำหนดพฤติกรรมแบบกำหนดเองหรือการยืนยันตัวตนสำหรับคำขอขาออกได้ คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การแก้ไขส่วนหัวคำขอ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม

ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การบล็อกคำขอเครือข่าย
  2. การแก้ไขส่วนหัวคำขอ
  3. การเปลี่ยนเส้นทางและเขียน URL ใหม่
  4. กฎแบบไดนามิกและการดีบัก declarativeNetRequest
← กลับไปที่ Browser Extensions Development (Chrome & Edge)