chrome.devtools.inspectedWindow

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

ใช้ chrome.devtools.inspectedWindow API เพื่อโต้ตอบกับหน้าต่างที่ตรวจสอบ: รับรหัสแท็บสำหรับหน้าที่ตรวจสอบ ประเมินโค้ดในบริบทของหน้าต่างที่ตรวจสอบ โหลดหน้าเว็บซ้ำ หรือรับรายการทรัพยากรภายในหน้าเว็บ

ไฟล์ Manifest

คุณต้องประกาศคีย์ต่อไปนี้ในไฟล์ Manifest เพื่อใช้ API นี้

"devtools_page"

ใช้ chrome.devtools.inspectedWindow เพื่อโต้ตอบกับหน้าต่างที่ตรวจสอบ: รับรหัสแท็บสำหรับ หน้าเว็บที่ตรวจสอบ ประเมินโค้ดในบริบทของหน้าต่างที่ตรวจสอบ โหลดหน้าเว็บซ้ำ หรือรับ รายการทรัพยากรภายในหน้าเว็บ

ดูข้อมูลเบื้องต้นเกี่ยวกับการใช้ API ของเครื่องมือสำหรับนักพัฒนาเว็บได้ที่สรุป API ของเครื่องมือสำหรับนักพัฒนาเว็บ

ภาพรวม

พร็อพเพอร์ตี้ tabId จะระบุตัวระบุแท็บที่คุณใช้กับchrome.tabs.* การเรียก API ได้ อย่างไรก็ตาม โปรดทราบว่าเราไม่ได้เปิดเผย chrome.tabs.* API ในหน้าส่วนขยายของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เนื่องจากข้อควรพิจารณาด้านความปลอดภัย คุณจะต้องส่งรหัสแท็บไปยังหน้าพื้นหลังและเรียกใช้ฟังก์ชัน chrome.tabs.* API จากที่นั่น

คุณอาจใช้เมธอด reload เพื่อโหลดหน้าเว็บที่ตรวจสอบซ้ำ นอกจากนี้ ผู้โทรยังระบุ การลบล้างสตริง User-Agent, สคริปต์ที่จะแทรกในช่วงต้นเมื่อการโหลดหน้าเว็บ หรือ ตัวเลือกเพื่อบังคับให้โหลดทรัพยากรที่แคชไว้ซ้ำได้ด้วย

ใช้getResourcesการเรียกและเหตุการณ์ onResourceContent เพื่อรับรายการทรัพยากร (เอกสาร สไตล์ชีต สคริปต์ รูปภาพ ฯลฯ) ภายในหน้าที่ตรวจสอบ เมธอด getContent และ setContent ของคลาส Resource พร้อมกับเหตุการณ์ onResourceContentCommitted อาจใช้เพื่อรองรับการแก้ไขเนื้อหาของทรัพยากร เช่น โดยเอดิเตอร์ภายนอก

การรันโค้ดในหน้าต่างที่ตรวจสอบ

เมธอด eval ช่วยให้ส่วนขยายสามารถเรียกใช้โค้ด JavaScript ในบริบทของ หน้าเว็บที่ตรวจสอบ วิธีนี้มีประสิทธิภาพเมื่อใช้ในบริบทที่เหมาะสมและเป็นอันตรายเมื่อใช้ อย่างไม่เหมาะสม ใช้เมธอด tabs.executeScript เว้นแต่คุณจะต้องการฟังก์ชันการทำงานที่เฉพาะเจาะจง ที่เมธอด eval มีให้

ความแตกต่างหลักระหว่างวิธี eval กับ tabs.executeScript มีดังนี้

  • เมธอด eval ไม่ได้ใช้โลกที่แยกจากกันสำหรับโค้ดที่กำลังประเมิน ดังนั้นโค้ดจึงเข้าถึงสถานะ JavaScript ของหน้าต่างที่ตรวจสอบได้ ใช้วิธีนี้เมื่อต้องเข้าถึงสถานะ JavaScript ของหน้าเว็บที่ตรวจสอบ
  • บริบทการดำเนินการของโค้ดที่กำลังประเมินรวมถึง Developer Tools Console API เช่น โค้ดอาจใช้ inspect และ $0
  • โค้ดที่ประเมินแล้วอาจแสดงค่าที่ส่งไปยัง Callback ของส่วนขยาย ค่าที่ส่งคืน ต้องเป็นออบเจ็กต์ JSON ที่ถูกต้อง (อาจมีเฉพาะประเภท JavaScript แบบดั้งเดิมและการอ้างอิงแบบไม่เป็นวัฏจักร ไปยังออบเจ็กต์ JSON อื่นๆ) โปรดระมัดระวังเป็นพิเศษขณะประมวลผลข้อมูลที่ได้รับจากหน้าเว็บที่ตรวจสอบ เนื่องจากบริบทการดำเนินการจะควบคุมโดยหน้าเว็บที่ตรวจสอบเป็นหลัก หน้าเว็บที่เป็นอันตรายอาจส่งผลต่อข้อมูลที่ส่งคืนไปยังส่วนขยาย

โปรดทราบว่าหน้าเว็บอาจมีบริบทการเรียกใช้ JavaScript ที่แตกต่างกันหลายบริบท แต่ละเฟรมจะมีบริบทของตัวเอง รวมถึงบริบทเพิ่มเติมสำหรับส่วนขยายแต่ละรายการที่มี Content Script ทำงานในเฟรมนั้น

โดยค่าเริ่มต้น เมธอด eval จะดำเนินการในบริบทของเฟรมหลักของหน้าที่ตรวจสอบ

เมธอด eval รับอาร์กิวเมนต์ที่ 2 ที่ไม่บังคับ ซึ่งคุณใช้เพื่อระบุบริบทที่ โค้ดได้รับการประเมินได้ ออบเจ็กต์ตัวเลือกนี้อาจมีคีย์ต่อไปนี้อย่างน้อย 1 รายการ

frameURL
ใช้เพื่อระบุเฟรมอื่นนอกเหนือจากเฟรมหลักของหน้าที่ตรวจสอบ
contextSecurityOrigin
ใช้เพื่อเลือกบริบทภายในเฟรมที่ระบุตามต้นทางเว็บ
useContentScriptContext
หากเป็นจริง ให้เรียกใช้สคริปต์ในบริบทเดียวกับสคริปต์เนื้อหาของส่วนขยาย (เทียบเท่ากับการระบุต้นทางของเว็บของส่วนขยายเองเป็นต้นทางความปลอดภัยของบริบท) ซึ่งใช้เพื่อ แลกเปลี่ยนข้อมูลกับ Content Script ได้

ตัวอย่าง

โค้ดต่อไปนี้จะตรวจสอบเวอร์ชันของ jQuery ที่หน้าเว็บที่ตรวจสอบใช้

chrome.devtools.inspectedWindow.eval(
  "jQuery.fn.jquery",
  function(result, isException) {
    if (isException) {
      console.log("the page is not using jQuery");
    } else {
      console.log("The page is using jQuery v" + result);
    }
  }
);

หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง API ของเครื่องมือสำหรับนักพัฒนาเว็บจากที่เก็บchrome-extension-samples

ประเภท

Resource

ทรัพยากรภายในหน้าเว็บที่ตรวจสอบ เช่น เอกสาร สคริปต์ หรือรูปภาพ

พร็อพเพอร์ตี้

  • URL

    สตริง

    URL ของทรัพยากร

  • getContent

    เป็นโมฆะ

    Promise

    รับเนื้อหาของทรัพยากร

    ฟังก์ชัน getContent มีลักษณะดังนี้ 

    (callback?: function) => {...}

    • callback

      ฟังก์ชัน ไม่บังคับ

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (response: object) => void

      • การตอบกลับ

        ออบเจ็กต์

        Chrome 151 ขึ้นไป

        ออบเจ็กต์ที่มีเนื้อหาของทรัพยากรและการเข้ารหัส

        • เนื้อหา

          สตริง

          เนื้อหาของทรัพยากร (อาจเข้ารหัส)

        • การเข้ารหัส

          สตริง

          ว่างเปล่าหากไม่ได้เข้ารหัสเนื้อหา หรือชื่อการเข้ารหัสในกรณีอื่นๆ ปัจจุบันรองรับเฉพาะ base64

    • returns

      Promise<object>

      Chrome 151 ขึ้นไป

      ฟังก์ชันที่รับเนื้อหาของทรัพยากรเมื่อคำขอเสร็จสมบูรณ์

      ระบบรองรับเฉพาะ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

  • setContent

    เป็นโมฆะ

    Promise

    ตั้งค่าเนื้อหาของทรัพยากร

    ฟังก์ชัน setContent มีลักษณะดังนี้ 

    (content: string, commit: boolean, callback?: function) => {...}

    • เนื้อหา

      สตริง

      เนื้อหาใหม่ของทรัพยากร ขณะนี้รองรับเฉพาะแหล่งข้อมูลประเภทข้อความ

    • คอมมิต

      บูลีน

      จริงหากผู้ใช้แก้ไขทรัพยากรเสร็จแล้ว และควรบันทึกเนื้อหาใหม่ของทรัพยากร เท็จหากเป็นการเปลี่ยนแปลงเล็กน้อยที่ส่งระหว่างที่ผู้ใช้แก้ไขทรัพยากร

    • callback

      ฟังก์ชัน ไม่บังคับ

      พารามิเตอร์ callback มีลักษณะดังนี้ 

      (error?: object) => void

      • ข้อผิดพลาด

        ออบเจ็กต์ ไม่บังคับ

        ตั้งค่าเป็น "ไม่ระบุ" หากตั้งค่าเนื้อหาของทรัพยากรสำเร็จ หรืออธิบายข้อผิดพลาดในกรณีอื่นๆ

    • returns

      Promise<object>

      Chrome 151 ขึ้นไป

      ฟังก์ชันที่เรียกใช้เมื่อคำขอเสร็จสมบูรณ์

      ระบบรองรับเฉพาะ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

พร็อพเพอร์ตี้

tabId

รหัสของแท็บที่กำลังตรวจสอบ รหัสนี้อาจใช้กับ chrome.tabs.* API

ประเภท

ตัวเลข

เมธอด

eval()

Promise 
chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
  callback?: function,
): Promise<object>

ประเมินนิพจน์ JavaScript ในบริบทของเฟรมหลักของหน้าที่ตรวจสอบ นิพจน์ต้องประเมินเป็นออบเจ็กต์ที่สอดคล้องกับ JSON ไม่เช่นนั้นระบบจะแสดงข้อยกเว้น ฟังก์ชัน eval สามารถรายงานข้อผิดพลาดฝั่ง DevTools หรือข้อยกเว้น JavaScript ที่เกิดขึ้นระหว่างการประเมิน ไม่ว่าในกรณีใด พารามิเตอร์ result ของ Callback จะเป็น undefined ในกรณีที่เกิดข้อผิดพลาดฝั่งเครื่องมือสำหรับนักพัฒนาเว็บ พารามิเตอร์ isException จะไม่ใช่ค่าว่าง และมีค่า isError เป็นจริง และค่า code เป็นรหัสข้อผิดพลาด ในกรณีที่เกิดข้อผิดพลาด JavaScript ระบบจะตั้งค่า isException เป็น true และตั้งค่า value เป็นค่าสตริงของออบเจ็กต์ที่ส่ง

พารามิเตอร์

  • นิพจน์

    สตริง

    นิพจน์ที่จะประเมิน

  • ตัวเลือก

    ออบเจ็กต์ ไม่บังคับ

    พารามิเตอร์ options อาจมีตัวเลือกอย่างน้อย 1 รายการ

    • frameURL

      สตริง ไม่บังคับ

      หากระบุไว้ ระบบจะประเมินนิพจน์ใน iframe ที่มี URL ตรงกับ URL ที่ระบุ โดยค่าเริ่มต้น ระบบจะประเมินนิพจน์ในเฟรมบนสุดของหน้าที่ตรวจสอบ

    • scriptExecutionContext

      สตริง ไม่บังคับ

      Chrome 107 ขึ้นไป

      ประเมินนิพจน์ในบริบทของ Content Script ของส่วนขยายที่ตรงกับต้นทางที่ระบุ หากระบุไว้ scriptExecutionContext จะลบล้างการตั้งค่า "จริง" ใน useContentScriptContext

    • useContentScriptContext

      บูลีน ไม่บังคับ

      ประเมินนิพจน์ในบริบทของ Content Script ของส่วนขยายที่เรียก โดยมีเงื่อนไขว่า Content Script ได้รับการแทรกลงในหน้าที่ตรวจสอบแล้ว หากไม่เป็นเช่นนั้น ระบบจะไม่ประเมินนิพจน์และจะเรียกใช้การเรียกกลับโดยตั้งค่าพารามิเตอร์ข้อยกเว้นเป็นออบเจ็กต์ที่มีฟิลด์ isError ตั้งค่าเป็นจริง และฟิลด์ code ตั้งค่าเป็น E_NOTFOUND

  • callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (response: object) => void

    • การตอบกลับ

      ออบเจ็กต์

      Chrome 151 ขึ้นไป

      ผลลัพธ์ของข้อมูลการประเมินและข้อยกเว้น

      • exceptionInfo

        ออบเจ็กต์

        ออบเจ็กต์ที่ให้รายละเอียดหากเกิดข้อยกเว้นขณะประเมินนิพจน์

        • รหัส

          สตริง

          ตั้งค่าหากเกิดข้อผิดพลาดในฝั่ง DevTools ก่อนที่จะมีการประเมินนิพจน์

        • คำอธิบาย

          สตริง

          ตั้งค่าหากเกิดข้อผิดพลาดในฝั่ง DevTools ก่อนที่จะมีการประเมินนิพจน์

        • รายละเอียด

          any[]

          ตั้งค่าหากเกิดข้อผิดพลาดในฝั่ง DevTools ก่อนที่จะมีการประเมินนิพจน์ ซึ่งมีอาร์เรย์ของค่าที่อาจแทนที่ลงในสตริงคำอธิบายเพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับสาเหตุของข้อผิดพลาด

        • isError

          บูลีน

          ตั้งค่าหากเกิดข้อผิดพลาดในฝั่ง DevTools ก่อนที่จะมีการประเมินนิพจน์

        • isException

          บูลีน

          ตั้งค่าหากโค้ดที่ประเมินสร้างข้อยกเว้นที่ไม่ได้จัดการ

        • value

          สตริง

          ตั้งค่าหากโค้ดที่ประเมินสร้างข้อยกเว้นที่ไม่ได้จัดการ

      • ผลลัพธ์

        ออบเจ็กต์

        ผลการประเมิน

การคืนสินค้า

  • Promise<object>

    Chrome 151 ขึ้นไป

    ฟังก์ชันที่จะเรียกใช้เมื่อการประเมินเสร็จสมบูรณ์

    ระบบรองรับเฉพาะ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

getResources()

Promise 
chrome.devtools.inspectedWindow.getResources(
  callback?: function,
): Promise<Resource[]>

ดึงข้อมูลรายการทรัพยากรจากหน้าที่ตรวจสอบ

พารามิเตอร์

  • callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (resources: Resource[]) => void

    • แหล่งข้อมูลได้ที่

      Resource[]

      แหล่งข้อมูลภายในหน้าเว็บ

การคืนสินค้า

  • Promise<Resource[]>

    Chrome 151 ขึ้นไป

    ฟังก์ชันที่รับรายการทรัพยากรเมื่อคำขอเสร็จสมบูรณ์

    ระบบรองรับเฉพาะ Promise สำหรับ Manifest V3 ขึ้นไปเท่านั้น แพลตฟอร์มอื่นๆ ต้องใช้การเรียกกลับ

reload()

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
): void

โหลดหน้าเว็บที่ตรวจสอบซ้ำ

พารามิเตอร์

  • reloadOptions

    ออบเจ็กต์ ไม่บังคับ

    • ignoreCache

      บูลีน ไม่บังคับ

      เมื่อเป็นจริง ตัวโหลดจะข้ามแคชสำหรับทรัพยากรหน้าเว็บที่ตรวจสอบทั้งหมดซึ่งโหลดก่อนที่จะทริกเกอร์เหตุการณ์ load ผลลัพธ์จะคล้ายกับการกด Ctrl+Shift+R ในหน้าต่างที่ตรวจสอบหรือภายในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

    • injectedScript

      สตริง ไม่บังคับ

      หากระบุไว้ สคริปต์จะได้รับการแทรกลงในทุกเฟรมของหน้าที่ตรวจสอบทันทีที่โหลด ก่อนสคริปต์ใดๆ ของเฟรม ระบบจะไม่แทรกสคริปต์หลังจากการโหลดซ้ำในภายหลัง เช่น หากผู้ใช้กด Ctrl+R

    • userAgent

      สตริง ไม่บังคับ

      หากระบุ สตริงจะลบล้างค่าของส่วนหัว HTTP User-Agent ที่ส่งขณะโหลดทรัพยากรของหน้าที่ตรวจสอบ สตริงจะลบล้างค่าของพร็อพเพอร์ตี้ navigator.userAgent ที่แสดงผลไปยังสคริปต์ที่ทํางานภายในหน้าเว็บที่ตรวจสอบด้วย

กิจกรรม

onResourceAdded

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

ทริกเกอร์เมื่อมีการเพิ่มทรัพยากรใหม่ลงในหน้าที่ตรวจสอบ

พารามิเตอร์

  • callback

    ฟังก์ชัน

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (resource: Resource) => void

onResourceContentCommitted

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

ทริกเกอร์เมื่อมีการคอมมิตรีวิชันใหม่ของทรัพยากร (เช่น ผู้ใช้บันทึกทรัพยากรเวอร์ชันที่แก้ไขแล้วในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์)

พารามิเตอร์

  • callback

    ฟังก์ชัน

    พารามิเตอร์ callback มีลักษณะดังนี้ 

    (resource: Resource, content: string) => void