ไฟล์ Manifest - สคริปต์เนื้อหา

คีย์ "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",
   }
 ],
 ...
}

ไฟล์

แต่ละไฟล์ต้องมี Relative Path ไปยังทรัพยากรในไดเรกทอรีรากของส่วนขยาย ระบบจะตัดเครื่องหมายทับ (/) ที่อยู่ด้านหน้าออกโดยอัตโนมัติ คีย์ "run_at" จะระบุเวลาที่จะแทรกแต่ละไฟล์

"css" - อาร์เรย์
ไม่บังคับ อาร์เรย์ของเส้นทางไฟล์ CSS ที่แทรกตามลำดับของอาร์เรย์นี้ และก่อนที่จะมีการสร้าง DOM หรือการแสดงผลหน้าเว็บ
"js" - อาร์เรย์,
ไม่บังคับ อาร์เรย์ของเส้นทางไฟล์ JavaScript ที่แทรกตามลำดับที่ปรากฏในอาร์เรย์นี้ หลังจากแทรกไฟล์ CSS แล้ว สตริงแต่ละรายการในอาร์เรย์ต้องเป็น Relative Path ไปยังทรัพยากรในไดเรกทอรีรากของส่วนขยาย ระบบจะตัดเครื่องหมายทับ ('/') ที่อยู่ด้านหน้าออกโดยอัตโนมัติ

จับคู่ 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 นี้ มีไว้เพื่อจำลองคีย์เวิร์ด @exclude Greasemonkey

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 ของหน้าโฮสต์ ดูข้อมูลเพิ่มเติมได้ที่ทำงานใน Isolated World

ตัวอย่าง

ดูบทแนะนำเรียกใช้ในทุกหน้าเพื่อสร้างส่วนขยายที่แทรกสคริปต์เนื้อหาในไฟล์ Manifest