คำอธิบาย
ใช้ chrome.declarativeContent
API เพื่อดำเนินการโดยขึ้นอยู่กับเนื้อหาของหน้าเว็บ โดยไม่ต้องขอสิทธิ์ในการอ่านเนื้อหาของหน้าเว็บ
สิทธิ์
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 ของส่วนขยาย
ประเภท
ImageDataType
โปรดดู https://developer.mozilla.org/en-US/docs/Web/API/ImageData
ประเภท
ImageData
PageStateMatcher
จับคู่สถานะหน้าเว็บตามเกณฑ์ต่างๆ
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(arg: PageStateMatcher) => {...}
-
อาร์กิวเมนต์
-
returns
-
-
css
string[] ไม่บังคับ
จับคู่หากตัวเลือก CSS ทั้งหมดในอาร์เรย์ตรงกับองค์ประกอบที่แสดงในเฟรมที่มีต้นทางเดียวกับเฟรมหลักของหน้า ตัวเลือกทั้งหมดในอาร์เรย์นี้ต้องเป็นตัวเลือกแบบผสมเพื่อให้จับคู่ได้เร็วขึ้น หมายเหตุ: การแสดงตัวเลือก CSS หลายร้อยรายการหรือแสดงรายการตัวเลือก CSS ที่ตรงกับหลายร้อยครั้งต่อหน้าอาจทำให้เว็บไซต์ทำงานช้าลง
-
isBookmarked
บูลีน ไม่บังคับ
Chrome 45 ขึ้นไปจับคู่หากสถานะที่บุ๊กมาร์กไว้ของหน้าเท่ากับค่าที่ระบุ ต้องมีสิทธิ์ในบุ๊กมาร์ก
-
pageUrl
UrlFilter ไม่บังคับ
จับคู่ในกรณีที่เป็นไปตามเงื่อนไขของ
UrlFilter
สำหรับ URL ระดับบนสุดของหน้าเว็บ
RequestContentScript
การดำเนินการของเหตุการณ์เชิงประกาศที่แทรกสคริปต์เนื้อหา
คำเตือน: การดำเนินการนี้ยังอยู่ระหว่างการทดสอบและไม่รองรับใน Chrome เวอร์ชันเสถียร
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(arg: RequestContentScript) => {...}
-
อาร์กิวเมนต์
-
returns
-
-
allFrames
บูลีน ไม่บังคับ
สคริปต์เนื้อหาจะทำงานในทุกเฟรมของหน้าที่ตรงกันหรือในเฟรมระดับบนสุดเท่านั้น ค่าเริ่มต้นคือ
false
-
css
string[] ไม่บังคับ
ชื่อไฟล์ CSS ที่จะแทรกเป็นส่วนหนึ่งของสคริปต์เนื้อหา
-
js
string[] ไม่บังคับ
ชื่อไฟล์ JavaScript ที่จะแทรกเป็นส่วนหนึ่งของสคริปต์เนื้อหา
-
matchAboutBlank
บูลีน ไม่บังคับ
จะแทรกสคริปต์เนื้อหาใน
about:blank
และabout:srcdoc
ไหม ค่าเริ่มต้นคือfalse
SetIcon
การทำงานของเหตุการณ์เชิงประกาศที่กำหนดไอคอนสี่เหลี่ยมจัตุรัสและการลดลงสำหรับการทำงานของหน้าเว็บหรือการทำงานของเบราว์เซอร์ของส่วนขยาย เมื่อเป็นไปตามเงื่อนไขที่เกี่ยวข้อง การดำเนินการนี้ใช้ได้โดยไม่ต้องมีสิทธิ์โฮสต์ แต่ส่วนขยายต้องมีการดำเนินการของหน้าเว็บหรือเบราว์เซอร์
ต้องระบุ imageData
หรือ path
อย่างใดอย่างหนึ่ง ทั้งสองเป็นพจนานุกรมที่จับคู่พิกเซลจำนวนกับการนำเสนอรูปภาพ การนำเสนอรูปภาพใน imageData
เป็นออบเจ็กต์ ImageData เช่น จากองค์ประกอบ canvas
ในขณะที่การนำเสนอรูปภาพใน path
คือเส้นทางไปยังไฟล์ภาพที่เกี่ยวข้องกับไฟล์ Manifest ของส่วนขยาย หากพิกเซลหน้าจอ scale
พอดีกับพิกเซลที่ไม่ขึ้นอยู่กับอุปกรณ์ ระบบจะใช้ไอคอน scale * n
หากไม่มีขนาดดังกล่าว ระบบจะปรับขนาดรูปภาพอื่นเป็นขนาดที่ต้องการ
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(arg: SetIcon) => {...}
-
อาร์กิวเมนต์
-
returns
-
-
imageData
ImageData | ออบเจ็กต์ ไม่บังคับ
เป็นออบเจ็กต์
ImageData
หรือพจนานุกรม {size -> ImageData} ที่แสดงไอคอนที่จะตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพที่ใช้ตามความหนาแน่นพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่พอดีกับหน่วยพื้นที่หน้าจอ 1 หน่วยเท่ากับscale
ระบบจะเลือกรูปภาพที่มีขนาดscale * n
โดย n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อย 1 รูป โปรดทราบว่าdetails.imageData = foo
เทียบเท่ากับdetails.imageData = {'16': foo}
ShowAction
การดำเนินการของเหตุการณ์เชิงประกาศที่กำหนดการดำเนินการของแถบเครื่องมือของส่วนขยายเป็นสถานะเปิดใช้ขณะเป็นไปตามเงื่อนไขที่เกี่ยวข้อง ใช้การดำเนินการนี้ได้โดยไม่ต้องมีสิทธิ์ของโฮสต์ หากส่วนขยายมีสิทธิ์ activeTab การคลิกการดำเนินการของหน้าเว็บจะให้สิทธิ์เข้าถึงแท็บที่ใช้งานอยู่
ในหน้าที่ไม่ตรงกับเงื่อนไขของแถบเครื่องมือส่วนขยายจะแสดงเป็นสีเทา และเมื่อคลิกที่ส่วนขยายจะเปิดเมนูตามบริบท แทนที่จะทริกเกอร์การดำเนินการ
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(arg: ShowAction) => {...}
-
อาร์กิวเมนต์
-
returns
-
ShowPageAction
โปรดใช้ declarativeContent.ShowAction
การดำเนินการของเหตุการณ์เชิงประกาศที่ตั้งค่าการทำงานของหน้าเว็บของส่วนขยายเป็นสถานะเปิดใช้ขณะเป็นไปตามเงื่อนไขที่เกี่ยวข้อง การดำเนินการนี้ใช้ได้โดยไม่ต้องมีสิทธิ์โฮสต์ แต่ส่วนขยายต้องมีการดำเนินการเป็นหน้าเว็บ หากส่วนขยายมีสิทธิ์ activeTab การคลิกการดำเนินการของหน้าเว็บจะให้สิทธิ์เข้าถึงแท็บที่ใช้งานอยู่
ในหน้าที่ไม่ตรงกับเงื่อนไขของแถบเครื่องมือส่วนขยายจะแสดงเป็นสีเทา และเมื่อคลิกที่ส่วนขยายจะเปิดเมนูตามบริบท แทนที่จะทริกเกอร์การดำเนินการ
พร็อพเพอร์ตี้
-
เครื่องมือสร้าง
void
ฟังก์ชัน
constructor
มีลักษณะดังนี้(arg: ShowPageAction) => {...}
-
อาร์กิวเมนต์
-
returns
-
เหตุการณ์
onPageChanged
มี API เหตุการณ์เชิงป้องกันที่ประกอบด้วย addRules
, removeRules
และ getRules