chrome.declarativeContent

คำอธิบาย

สิทธิ์

แนวคิดและการใช้งาน

Declarative Content API ช่วยให้คุณเปิดใช้การดำเนินการของส่วนขยายได้โดยขึ้นอยู่กับ URL ของหน้าเว็บ หรือหากตัวเลือก CSS ตรงกับองค์ประกอบบนหน้าเว็บโดยไม่ต้องเพิ่มสิทธิ์ของโฮสต์หรือแทรกสคริปต์เนื้อหา

ใช้สิทธิ์ activeTab เพื่อโต้ตอบกับหน้าเว็บหลังจากที่ผู้ใช้คลิกการดำเนินการของส่วนขยาย

กฎ

กฎประกอบด้วยเงื่อนไขและการดำเนินการ หากเป็นไปตามเงื่อนไขที่กำหนดไว้ การดำเนินการทั้งหมดก็จะทำงาน การดำเนินการคือ setIcon() และ showAction()

PageStateMatcher จะจับคู่หน้าเว็บต่อเมื่อตรงตามเกณฑ์ทั้งหมดที่แสดงในรายการ ซึ่งอาจตรงกับ page url, ตัวเลือกแบบผสม CSS หรือสถานะบุ๊กมาร์กของหน้าเว็บ กฎต่อไปนี้จะเปิดใช้การดำเนินการของส่วนขยายในหน้า Google เมื่อมีช่องรหัสผ่านอยู่

let rule1 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
      css: ["input[type='password']"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowAction() ]
};

หากต้องการเปิดใช้การทำงานของส่วนขยายกับ Google Sites ที่มีวิดีโอด้วย คุณอาจเพิ่มเงื่อนไขที่ 2 เนื่องจากแต่ละเงื่อนไขเพียงพอที่จะทริกเกอร์การดำเนินการที่ระบุทั้งหมด ดังนี้

let rule2 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
      css: ["input[type='password']"]
    }),
    new chrome.declarativeContent.PageStateMatcher({
      css: ["video"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowAction() ]
};

เหตุการณ์ onPageChanged จะทดสอบว่ากฎใดมีเงื่อนไขที่ตรงตามเงื่อนไขอย่างน้อย 1 ข้อและดำเนินการต่างๆ หรือไม่ กฎจะคงอยู่ในเซสชันการท่องเว็บ ดังนั้น ในระหว่างการติดตั้งส่วนขยาย คุณควรใช้ removeRules เพื่อล้างกฎที่ติดตั้งไว้ก่อนหน้านี้ก่อน แล้วใช้ addRules เพื่อลงทะเบียนกฎใหม่

chrome.runtime.onInstalled.addListener(function(details) {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([rule2]);
  });
});

ด้วยสิทธิ์ activeTab ส่วนขยายจะไม่แสดงคำเตือนเกี่ยวกับสิทธิ์ และเมื่อผู้ใช้คลิกการทำงานของส่วนขยาย ส่วนขยายจะทำงานเฉพาะในหน้าที่เกี่ยวข้องเท่านั้น

การจับคู่ URL ของหน้าเว็บ

PageStateMatcher.pageurl จะจับคู่เมื่อมีการดำเนินการตามเกณฑ์ URL เกณฑ์ที่พบบ่อยที่สุดคือการเชื่อมโยงโฮสต์ เส้นทาง หรือ URL ตามด้วย "ประกอบด้วย" "เท่ากับ" "คำนำหน้า" หรือ "คำต่อท้าย" ตารางต่อไปนี้มีตัวอย่างบางส่วน

เกณฑ์	ตรงกับ
{ hostSuffix: 'google.com' }	URL ทั้งหมดของ Google
{ pathPrefix: '/docs/extensions' }	URL เอกสารของส่วนขยาย
{ urlContains: 'developer.chrome.com' }	URL เอกสารของนักพัฒนาแอป Chrome ทั้งหมด

เกณฑ์ทั้งหมดคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ดูรายการเกณฑ์ทั้งหมดได้ที่ UrlFilter

การจับคู่ CSS

เงื่อนไข PageStateMatcher.css ต้องเป็นตัวเลือกแบบผสม ซึ่งหมายความว่าคุณจะใส่ชุดค่าผสม เช่น ช่องว่างหรือ ">" ในตัวเลือกไม่ได้ ซึ่งจะช่วยให้ Chrome จับคู่ตัวเลือกได้อย่างมีประสิทธิภาพมากขึ้น

ตัวเลือกแบบผสม (OK)	ตัวเลือกที่ซับซ้อน (ใช้ไม่ได้)
a	div p
iframe.special[src^='http']	p>span.highlight
ns|*	p + ol
#abcd:checked	p::first-line

เงื่อนไข CSS จะตรงกับองค์ประกอบที่แสดงเท่านั้น หากองค์ประกอบที่ตรงกับตัวเลือกของคุณคือ display:none หรือองค์ประกอบระดับบนสุดอย่างใดอย่างหนึ่งคือ display:none ก็จะไม่ทำให้เงื่อนไขตรงกัน องค์ประกอบที่จัดรูปแบบด้วย visibility:hidden จัดตำแหน่งไว้นอกหน้าจอ หรือถูกซ่อนโดยองค์ประกอบอื่นๆ จะยังคงทำให้เงื่อนไขตรงกันได้

การจับคู่สถานะที่บุ๊กมาร์กไว้

เงื่อนไข PageStateMatcher.isBookmarked ช่วยให้จับคู่สถานะบุ๊กมาร์กของ URL ปัจจุบันในโปรไฟล์ของผู้ใช้ได้ หากต้องการใช้เงื่อนไขนี้ คุณต้องประกาศสิทธิ์ "บุ๊กมาร์ก" ในไฟล์ Manifest ของส่วนขยาย