แทนที่ 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 ส่วนที่อธิบายการเปลี่ยนแปลงที่จำเป็นสำหรับโค้ดที่ไม่ได้เป็นส่วนหนึ่งของ Service Worker ของส่วนขยาย ซึ่งอธิบายการแปลงคําขอเว็บที่บล็อกซึ่ง Manifest V2 ใช้ไปเป็นคําขอสุทธิแบบประกาศซึ่ง Manifest V3 ใช้ ส่วนอื่นๆ อีก 2 ส่วนจะครอบคลุมการอัปเดตโค้ดที่จําเป็นสําหรับการย้ายข้อมูลไปยัง Manifest V3 และการปรับปรุงความปลอดภัย

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

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

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

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

สร้างกฎคำขอเครือข่ายแบบประกาศ

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

กรณีการใช้งานทั่วไป

ส่วนต่อไปนี้จะอธิบายกรณีการใช้งานทั่วไปของคําขอสุทธิแบบประกาศ วิธีการด้านล่างเป็นเพียงภาพรวมคร่าวๆ ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลทั้งหมดนี้ได้ในเอกสารอ้างอิง 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" ของ "urlFilter" จะมาแทนที่ตัวเลือก urls ที่ส่งไปยังฟังก์ชันการฟัง 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 ที่ส่งไปยังโปรแกรมฟัง 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": [
    ""
  ]