แทนที่ Listener การบล็อกคำขอเว็บ

การแก้ไขคำขอเครือข่ายในไฟล์ Manifest V3

ไฟล์ Manifest V3 เปลี่ยนวิธีที่ส่วนขยายจัดการกับการแก้ไขคำขอเครือข่าย ส่วนขยายจะระบุกฎที่อธิบายการดำเนินการเมื่อตรงกับชุดเงื่อนไขที่กำหนด แทนที่จะดักจับคำขอของเครือข่ายและเปลี่ยนแปลงคำขอนั้นขณะรันไทม์ด้วย chrome.webRequest โดยใช้ Declarative Net Request API

Web Request API และ Declarative Net Request API แตกต่างกันอย่างมาก คุณต้องแทนที่การเรียกใช้ฟังก์ชันหนึ่งด้วยการเรียกใช้ฟังก์ชันอื่น คุณต้องแก้ไขโค้ดใหม่ในกรณีการใช้งาน ส่วนนี้จะอธิบายถึงกระบวนการดังกล่าว

ในไฟล์ Manifest V2 การบล็อกคำขอเว็บอาจทำให้ทั้งประสิทธิภาพของส่วนขยายและหน้าที่ส่วนขยายทำงานด้วยแย่ลงอย่างมาก เนมสเปซ webRequest รองรับเหตุการณ์ที่อาจบล็อกได้ 9 รายการ ซึ่งแต่ละรายการจะมีตัวแฮนเดิลเหตุการณ์ไม่จำกัดจำนวน แต่ยิ่งไปกว่านั้น หน้าเว็บแต่ละหน้าอาจถูกบล็อกโดยส่วนขยายหลายรายการ และสิทธิ์ที่จำเป็นสำหรับการดำเนินการนี้จะรุกล้ำเข้ามา ไฟล์ Manifest V3 ป้องกันปัญหานี้โดยการแทนที่โค้ดเรียกกลับด้วยกฎเชิงประกาศ

นี่คือส่วนที่ 2 จาก 3 ส่วนที่อธิบายการเปลี่ยนแปลงที่จำเป็นสำหรับโค้ดที่ไม่ได้เป็นส่วนหนึ่งของโปรแกรมทำงานของบริการส่วนขยาย ไฟล์นี้อธิบายการแปลงคำขอเว็บที่ไฟล์ Manifest V2 ใช้อยู่ไปยังคำขอสุทธิที่มีการประกาศ ซึ่งใช้โดยไฟล์ Manifest V3 อีก 2 ส่วนจะครอบคลุมการอัปเดตโค้ดที่จำเป็นต่อการย้ายข้อมูลไปยังไฟล์ Manifest V3 และการปรับปรุงความปลอดภัย

อัปเดตสิทธิ์

ทำการเปลี่ยนแปลงต่อไปนี้ในช่อง "permissions" ใน manifest.json

• นําสิทธิ์ "webRequest" ออกหากไม่จําเป็นต้องสังเกตคําขอเครือข่ายอีกต่อไป
• ย้ายรูปแบบการจับคู่จาก "permissions" ไปยัง "host_permissions"

คุณจะต้องเพิ่มสิทธิ์อื่นๆ ตามกรณีการใช้งาน สิทธิ์เหล่านั้นจะอธิบายพร้อมกรณีการใช้งานที่รองรับ

สร้างกฎคำขอสุทธิที่มีการประกาศ

การสร้างกฎคำขอสุทธิที่มีการประกาศจะต้องมีการเพิ่มออบเจ็กต์ "declarative_net_request" ลงใน manifest.json บล็อก "declarative_net_request" มีอาร์เรย์ของออบเจ็กต์ "rule_resource" รายการที่ชี้ไปยังไฟล์กฎ ไฟล์กฎมีอาร์เรย์ของออบเจ็กต์ที่ระบุการดำเนินการและเงื่อนไขที่มีการเรียกใช้การดำเนินการเหล่านั้น

Use Case ทั่วไป

ส่วนต่อไปนี้จะอธิบายกรณีการใช้งานที่พบบ่อยสำหรับคำขอสุทธิที่มีการประกาศ คำแนะนำด้านล่างเป็นเพียงข้อมูลคร่าวๆ เท่านั้น รายละเอียดเพิ่มเติมเกี่ยวกับข้อมูลทั้งหมดที่นี่มีอธิบายไว้ในข้อมูลอ้างอิงของ API ภายใต้ chrome.declarativeNetRequest

บล็อก URL รายการเดียว

กรณีการใช้งานทั่วไปในไฟล์ Manifest V2 คือการบล็อกคำขอเว็บโดยใช้เหตุการณ์ onBeforeRequest ในสคริปต์เบื้องหลัง

chrome.webRequest.onBeforeRequest.addListener((e) => {
    return { cancel: true };
}, { urls: ["https://www.example.com/*"] }, ["blocking"]);

สำหรับไฟล์ Manifest V3 ให้สร้างกฎ declarativeNetRequest ใหม่โดยใช้ประเภทการดำเนินการ "block" สังเกตออบเจ็กต์ "condition" ในกฎตัวอย่าง "urlFilter" จะแทนที่ตัวเลือก urls ที่ส่งไปยัง Listener webRequest อาร์เรย์ "resourceTypes" ระบุหมวดหมู่ของทรัพยากรที่จะบล็อก ตัวอย่างนี้บล็อกเฉพาะหน้า HTML หลักเท่านั้น แต่คุณสามารถบล็อกเฉพาะแบบอักษรได้ เป็นต้น

[
  {
    "id" : 1,
    "priority": 1,
    "action" : { "type" : "block" },
    "condition" : {
      "urlFilter" : "||example.com",
      "resourceTypes" : ["main_frame"]
    }
  }
]

คุณต้องอัปเดตสิทธิ์ของส่วนขยายจึงจะใช้งานได้ ใน manifest.json ให้แทนที่สิทธิ์ "webRequestBlocking" ด้วยสิทธิ์ "declarativeNetRequest" โปรดทราบว่าระบบจะนำ URL ออกจากช่อง "permissions" เนื่องจากการบล็อกเนื้อหาไม่จำเป็นต้องใช้สิทธิ์ของโฮสต์ ดังที่แสดงด้านบน ไฟล์กฎจะระบุโฮสต์ที่ใช้คำขอสุทธิที่มีการประกาศ

หากต้องการลองใช้ โค้ดด้านล่างมีอยู่ในที่เก็บตัวอย่างของเรา

  "permissions": [
    "webRequestBlocking",
    "https://*.example.com/*"
  ]

  "permissions": [
    "declarativeNetRequest",
  ]

เปลี่ยนเส้นทาง URL หลายรายการ

กรณีการใช้งานทั่วไปอีกกรณีหนึ่งในไฟล์ Manifest V2 คือการใช้เหตุการณ์ BeforeRequest เพื่อเปลี่ยนเส้นทางคำขอเว็บ

chrome.webRequest.onBeforeRequest.addListener((e) => {
    console.log(e);
    return { redirectUrl: "https://developer.chrome.com/docs/extensions/mv3/intro/" };
  }, { 
    urls: [
      "https://developer.chrome.com/docs/extensions/mv2/"
    ]
  }, 
  ["blocking"]
);

สำหรับไฟล์ Manifest V3 ให้ใช้ประเภทการดำเนินการ "redirect" เช่นเคย "urlFilter" จะแทนที่ตัวเลือก url ที่ส่งไปยัง Listener ของ webRequest โปรดทราบว่าสำหรับตัวอย่างนี้ ออบเจ็กต์ "action" ของไฟล์กฎจะมีช่อง "redirect" ที่มี URL ที่จะแสดงแทน URL ที่กรองอยู่

[
  {
    "id" : 1,
    "priority": 1,
    "action": {
      "type": "redirect",
      "redirect": { "url": "https://developer.chrome.com/docs/extensions/mv3/intro/" }
    },
    "condition": {
      "urlFilter": "https://developer.chrome.com/docs/extensions/mv2/",
      "resourceTypes": ["main_frame"]
    }
  }

สถานการณ์นี้ต้องเปลี่ยนแปลงสิทธิ์ของส่วนขยายด้วย เช่นเคย ให้แทนที่สิทธิ์ "webRequestBlocking" ด้วยสิทธิ์ "declarativeNetRequest" ระบบจะย้าย URL จาก manifest.json ไปยังไฟล์กฎอีกครั้ง โปรดทราบว่าการเปลี่ยนเส้นทางจะต้องใช้สิทธิ์ "declarativeNetRequestWithHostAccess" ด้วย นอกเหนือจากสิทธิ์ของโฮสต์

หากต้องการลองใช้ โค้ดด้านล่างมีอยู่ในที่เก็บตัวอย่างของเรา

  "permissions": [
    "webRequestBlocking",
    "https://developer.chrome.com/docs/extensions/*",
    "https://developer.chrome.com/docs/extensions/reference"
  ]

  "permissions": [
    "declarativeNetRequestWithHostAccess"
  ],
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]

บล็อกคุกกี้

ในไฟล์ Manifest V2 การบล็อกคุกกี้จะต้องมีการสกัดกั้นส่วนหัวของคำขอเว็บก่อนที่จะส่งและนำส่วนหัวบางรายการออก

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    removeHeader(details.requestHeaders, 'cookie');
    return {requestHeaders: details.requestHeaders};
  },
  // filters
  {urls: ['https://*/*', 'http://*/*']},
  // extraInfoSpec
  ['blocking', 'requestHeaders', 'extraHeaders']);

ไฟล์ Manifest V3 ยังดำเนินการกับกฎในไฟล์กฎด้วย ครั้งนี้ประเภทการดำเนินการคือ "modifyHeaders" ไฟล์จะรับอาร์เรย์ของออบเจ็กต์ "requestHeaders" รายการที่ระบุส่วนหัวที่จะแก้ไขและวิธีแก้ไข สังเกตว่าออบเจ็กต์ "condition" มีเฉพาะอาร์เรย์ "resourceTypes" สามารถรองรับค่าเดียวกันกับตัวอย่างก่อนหน้านี้

หากต้องการลองใช้ โค้ดด้านล่างมีอยู่ในที่เก็บตัวอย่างของเรา

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "requestHeaders": [
        { "header": "cookie", "operation": "remove" }
      ]
    },
    "condition": {
      "urlFilter": "|*?no-cookies=1",
      "resourceTypes": ["main_frame"]
    }
  }
]

สถานการณ์นี้ต้องเปลี่ยนแปลงสิทธิ์ของส่วนขยายด้วย เช่นเคย ให้แทนที่สิทธิ์ "webRequestBlocking" ด้วยสิทธิ์ "declarativeNetRequest"

  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://*/*",
    "http://*/*"
  ],

  "permissions": [
    "declarativeNetRequest",
  ],
  "host_permissions": [
    ""
  ]