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

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

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

คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงเหล่านี้หากมีการติดตั้งส่วนขยายตามนโยบาย สำหรับส่วนขยายที่ติดตั้งตามนโยบาย สิทธิ์ webRequestBlocking จะยังคงใช้ได้ในไฟล์ Manifest V3

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

บทนำ

ในไฟล์ Manifest V2 การบล็อกคำขอเว็บอาจทำให้ประสิทธิภาพของทั้งส่วนขยายและหน้าเว็บที่ส่วนขยายทำงานด้วยกันลดลงอย่างมาก webRequestเนมสเปซรองรับเหตุการณ์ที่อาจบล็อก 9 รายการ ซึ่งแต่ละรายการมีตัวแฮนเดิลเหตุการณ์ได้ไม่จำกัดจำนวน ที่แย่ไปกว่านั้นคือหน้าเว็บแต่ละหน้าอาจถูกบล็อกโดยส่วนขยายหลายรายการ และสิทธิ์ที่จำเป็นสำหรับส่วนขยายเหล่านี้ก็เป็นการรุกล้ำความเป็นส่วนตัว 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": [
    ""
  ]