คีย์ "content_scripts"
ระบุไฟล์ JavaScript หรือ CSS ที่โหลดแบบคงที่ที่จะใช้ทุกครั้งที่มีการเปิดหน้าที่ตรงกับรูปแบบ URL ที่ระบุ ส่วนขยายยังสามารถแทรกสคริปต์เนื้อหาแบบเป็นโปรแกรมได้ด้วย ดูรายละเอียดเพิ่มเติมได้ที่การแทรกสคริปต์
ไฟล์ Manifest
รายการเหล่านี้คือคีย์ที่รองรับสำหรับ "content_scripts"
เฉพาะคีย์ "matches"
และ "js"
หรือ "css"
เท่านั้นที่จำเป็น
manifest.json
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"css": ["my-styles.css"],
"js": ["content-script.js"],
"exclude_matches": ["*://*/*foo*"],
"include_globs": ["*example.com/???s/*"],
"exclude_globs": ["*bar*"],
"all_frames": false,
"match_origin_as_fallback": false,
"match_about_blank": false,
"run_at": "document_idle",
"world": "ISOLATED",
}
],
...
}
ไฟล์
แต่ละไฟล์ต้องมีเส้นทางที่เกี่ยวข้องไปยังทรัพยากรในไดเรกทอรีรากของส่วนขยาย ระบบจะตัดเครื่องหมายทับ (/
) นำหน้าโดยอัตโนมัติ คีย์ "run_at"
ระบุว่าระบบจะแทรกแต่ละไฟล์เมื่อใด
"css"
- อาร์เรย์- ไม่บังคับ อาร์เรย์ของเส้นทางไฟล์ CSS ที่แทรกไว้ตามลำดับของอาร์เรย์นี้ และก่อนที่จะมีการสร้าง DOM หรือการแสดงผลหน้าเว็บ
"js"
- อาร์เรย์- ไม่บังคับ อาร์เรย์ของเส้นทางไฟล์ JavaScript โดยแทรกตามลำดับที่ปรากฏในอาร์เรย์นี้ หลังจากแทรกไฟล์ CSS แต่ละสตริงในอาร์เรย์ต้องเป็นเส้นทางที่เกี่ยวข้องไปยังทรัพยากรในไดเรกทอรีรากของส่วนขยาย เครื่องหมายทับ ("/") จะถูกตัดออกโดยอัตโนมัติ
URL ที่ตรงกัน
ใช้เฉพาะพร็อพเพอร์ตี้ "matches"
เท่านั้น จากนั้นคุณใช้ "exclude_matches"
, "include_globs"
และ "exclude_globs"
เพื่อปรับแต่ง URL ที่จะแทรกโค้ดได้ คีย์ "matches"
จะเรียกให้แสดงคำเตือน
"matches"
- อาร์เรย์- ต้องระบุ ระบุรูปแบบ URL ที่จะแทรกสคริปต์เนื้อหา โปรดดูไวยากรณ์ในรูปแบบการจับคู่
"exclude_matches"
- อาร์เรย์- ไม่บังคับ ยกเว้นรูปแบบ URL ที่จะแทรกสคริปต์เนื้อหาลงไป โปรดดูไวยากรณ์ในรูปแบบการจับคู่
"include_globs"
- อาร์เรย์- ไม่บังคับ ใช้หลังการจับคู่เพื่อรวมเฉพาะ URL ที่ตรงกับ glob นี้ด้วย มีไว้เพื่อจำลองคีย์เวิร์ด @include Greasemonkey
"exclude_globs"
- อาร์เรย์- ไม่บังคับ ใช้หลังการจับคู่เพื่อยกเว้น URL ที่ตรงกับ glob นี้ มีวัตถุประสงค์เพื่อจำลองคีย์เวิร์ด Greasemonkey @exclude
URL ของ Glob คือ URL ที่มี "ไวลด์การ์ด" * และเครื่องหมายคำถาม ไวลด์การ์ด * จะจับคู่สตริงที่มีความยาวเท่าใดก็ได้ รวมถึงสตริงว่าง ส่วนเครื่องหมายคำถาม ? ตรงกับอักขระเดี่ยวตัวใดก็ได้
ระบบจะแทรกสคริปต์เนื้อหาลงในหน้าเว็บในกรณีต่อไปนี้
- URL ของ URL ตรงกับรูปแบบ
"matches"
และ"include_globs"
- และ URL ไม่ตรงกับรูปแบบ
"exclude_matches"
หรือ"exclude_globs"
ตัวอย่างการจับคู่ Glob และ URL
"include_globs"
manifest.json
{
...
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"include_globs": ["https://???.example.com/foo/*"],
"js": ["content-script.js"]
}
],
...
}
https://www.example.com/foo/bar https://the.example.com/foo/
https://my.example.com/foo/bar https://example.com/foo/* https://www.example.com/foo
manifest.json
{
...
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"include_globs": ["*example.com/???s/*"],
"js": ["content-script.js"]
}
],
...
}
https://www.example.com/arts/index.html https://www.example.com/jobs/index.html
https://www.example.com/sports/index.html https://www.example.com/music/index.html
"exclude_globs"
manifest.json
{
...
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"exclude_globs": ["*science*"],
"js": ["content-script.js"]
}
],
...
}
https://history.example.com https://.example.com/music
https://science.example.com https://www.example.com/science
ตัวอย่างการปรับแต่งขั้นสูง
manifest.json
{
...
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"exclude_matches": ["*://*/*business*"],
"include_globs": ["*example.com/???s/*"],
"exclude_globs": ["*science*"],
"js": ["content-script.js"]
}
],
...
}
https://www.example.com/arts/index.html https://.example.com/jobs/index.html
https://science.example.com https://www.example.com/jobs/business https://www.example.com/science
เฟรม
คีย์ "all_frames"
จะระบุว่าควรแทรกสคริปต์เนื้อหาลงในเฟรมทั้งหมดที่ตรงกับข้อกําหนดของ URL ที่ระบุหรือไม่ หากตั้งค่าเป็น false
ระบบจะแทรกเข้าไปในเฟรมบนสุดเท่านั้น ซึ่งใช้ร่วมกับ "match_about_blank"
เพื่อแทรกลงในเฟรม about:blank
ได้
หากต้องการแทรกลงในเฟรมอื่นๆ เช่น data:
, blob:
และ filesystem:
ให้ตั้งค่า "match_origin_as_fallback"
เป็น true
โปรดดูรายละเอียดที่หัวข้อแทรกในเฟรมที่เกี่ยวข้อง
- บูลีน
"all_frames"
รายการ - ไม่บังคับ ค่าเริ่มต้นคือ
false
ซึ่งหมายความว่าระบบจะจับคู่เฉพาะเฟรมบนสุดเท่านั้น หากตั้งค่าเป็น "จริง" ระบบจะแทรกลงในเฟรมทั้งหมด แม้ว่าเฟรมจะไม่ใช่เฟรมบนสุดในแท็บ แต่ละเฟรมจะได้รับการตรวจสอบแยกกันสำหรับข้อกำหนดของ URL ระบบจะไม่แทรกลงในเฟรมย่อยหากไม่เป็นไปตามข้อกำหนดของ URL "match_about_blank"
- บูลีน- ไม่บังคับ ค่าเริ่มต้นคือ
false
สคริปต์ควรแทรกลงในเฟรมabout:blank
ที่ URL หลักตรงกับรูปแบบที่ประกาศไว้ใน"matches"
ไหม "match_origin_as_fallback"
- บูลีน- ไม่บังคับ ค่าเริ่มต้นคือ
false
สคริปต์ควรแทรกในเฟรมที่สร้างโดยต้นทางที่ตรงกันหรือไม่ แต่ URL หรือต้นทางอาจไม่ตรงกับรูปแบบโดยตรง ซึ่งรวมถึงเฟรมที่มีรูปแบบแตกต่างกัน เช่นabout:
,data:
,blob:
และfilesystem:
เวลาทำงานและสภาพแวดล้อมการดำเนินการ
โดยค่าเริ่มต้น ระบบจะแทรกสคริปต์เนื้อหาเมื่อเอกสารและทรัพยากรทั้งหมดโหลดเสร็จแล้ว และอยู่ในสภาพแวดล้อมการดำเนินการแยกแบบส่วนตัวที่หน้าเว็บหรือส่วนขยายอื่นๆ ไม่สามารถเข้าถึงได้ คุณสามารถเปลี่ยนค่าเริ่มต้นได้ในคีย์ต่อไปนี้
"run_at"
-document_start
|document_end
|document_idle
- ไม่บังคับ ระบุเวลาที่ควรแทรกสคริปต์ลงในหน้าเว็บ ซึ่งสอดคล้องกับสถานะการโหลดของ Document.readyState ดังนี้
"document_start"
: DOM ยังคงโหลดอยู่"document_end"
: ทรัพยากรของหน้าเว็บยังคงโหลดอยู่"document_idle"
: DOM และทรัพยากรโหลดเสร็จแล้ว โดยตัวเลือกนี้คือค่าเริ่มต้น
"world"
-ISOLATED
|MAIN
- ไม่บังคับ โลก JavaScript ที่สคริปต์จะทำงานภายใน ค่าเริ่มต้นคือ
"ISOLATED"
ซึ่งเป็นสภาพแวดล้อมการดำเนินการสำหรับสคริปต์เนื้อหาโดยเฉพาะ การเลือกโลกของ"MAIN"
หมายความว่าสคริปต์จะแชร์สภาพแวดล้อมการเรียกใช้กับ JavaScript ของหน้าโฮสต์ โปรดดูข้อมูลเพิ่มเติมที่ทำงานในโลกที่โดดเดี่ยว
ตัวอย่าง
ดูบทแนะนำเรียกใช้ในทุกหน้าเพื่อสร้างส่วนขยายที่แทรกสคริปต์เนื้อหาในไฟล์ Manifest