หน้านี้ได้รับการแปลโดย Cloud Translation API

ขยายเครื่องมือสำหรับนักพัฒนาเว็บ

ส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บจะเพิ่มฟีเจอร์ไปยังเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยการเข้าถึง API ส่วนขยายสำหรับนักพัฒนาเว็บโดยเฉพาะผ่านหน้าเครื่องมือสำหรับนักพัฒนาเว็บที่เพิ่มลงในส่วนขยาย

API ส่วนขยายสำหรับเครื่องมือสำหรับนักพัฒนาเว็บโดยเฉพาะประกอบด้วยรายการต่อไปนี้

หน้าเครื่องมือสำหรับนักพัฒนาเว็บ

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

สร้างและโต้ตอบกับแผงโดยใช้ API ของ devtools.panels ซึ่งรวมถึงการเพิ่มหน้าส่วนขยายอื่นๆ เป็นแผงหรือแถบด้านข้างในหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ
ดูข้อมูลเกี่ยวกับหน้าต่างที่ตรวจสอบและประเมินโค้ดในหน้าต่างที่ตรวจสอบโดยใช้ API ของ devtools.inspectedWindow
ดูข้อมูลเกี่ยวกับคำขอเครือข่ายโดยใช้ devtools.network API
ขยายแผงโปรแกรมอัดเสียงโดยใช้ API ของ devtools.recorder

หน้าเครื่องมือสำหรับนักพัฒนาเว็บเข้าถึง API ของส่วนขยายได้โดยตรง ซึ่งรวมถึงความสามารถในการสื่อสารกับโปรแกรมทำงานของบริการโดยใช้การส่งข้อความ

สร้างส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการสร้างหน้าเครื่องมือสำหรับนักพัฒนาเว็บสำหรับส่วนขยาย ให้เพิ่มช่อง devtools_page ในไฟล์ Manifest ของส่วนขยาย ดังนี้

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

ฟิลด์ devtools_page ต้องชี้ไปที่หน้า HTML เนื่องจากหน้าเครื่องมือสำหรับนักพัฒนาเว็บต้องอยู่ในส่วนขยายของคุณ เราจึงขอแนะนำให้ระบุหน้าดังกล่าวโดยใช้ URL สัมพัทธ์

สมาชิกของ chrome.devtools API จะใช้ได้เฉพาะหน้าที่โหลดภายในหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บในขณะที่หน้าต่างนั้นเปิดอยู่ สคริปต์เนื้อหาและหน้าส่วนขยายอื่นๆ ไม่มีสิทธิ์เข้าถึง API เหล่านี้

องค์ประกอบ UI เครื่องมือสำหรับนักพัฒนาเว็บ: แผงและแผงแถบด้านข้าง

นอกจากองค์ประกอบ UI ส่วนขยายตามปกติ เช่น การทำงานของเบราว์เซอร์ เมนูตามบริบท และป๊อปอัป ส่วนขยาย DevTools สามารถเพิ่มองค์ประกอบ UI ลงในหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บได้

แผงคือแท็บระดับบนสุด เช่น แผงองค์ประกอบ แหล่งที่มา และเครือข่าย
แผงแถบด้านข้างจะแสดง UI เสริมที่เกี่ยวข้องกับแผง แผงรูปแบบ รูปแบบที่คำนวณแล้ว และ Listener เหตุการณ์ในแผงองค์ประกอบคือตัวอย่างของแผงแถบด้านข้าง แผงแถบด้านข้างอาจมีลักษณะเหมือนรูปภาพตัวอย่างต่อไปนี้ ทั้งนี้ ขึ้นอยู่กับเวอร์ชันของ Chrome ที่คุณใช้และตำแหน่งที่หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บวางอยู่บนแท่นชาร์จ

หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บแสดงแผงองค์ประกอบและแผงแถบด้านข้างของรูปแบบ — หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บที่แสดงแผงองค์ประกอบและแผงแถบด้านข้างของรูปแบบ

โดยแต่ละแผงจะมีไฟล์ HTML ของตัวเอง ซึ่งอาจรวมถึงทรัพยากรอื่นๆ (JavaScript, CSS, รูปภาพ และอื่นๆ) หากต้องการสร้างแผงพื้นฐาน ให้ใช้โค้ดต่อไปนี้

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

JavaScript ที่ดำเนินการในแผงหรือแผงแถบด้านข้างมีสิทธิ์เข้าถึง API เดียวกันกับหน้าเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการสร้างแผงแถบด้านข้างพื้นฐาน ให้ใช้โค้ดต่อไปนี้

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

การแสดงเนื้อหาในแผงแถบด้านข้างมีหลายวิธีดังนี้

เนื้อหา HTML: เรียกใช้ setPage() เพื่อระบุหน้า HTML ที่จะแสดงในแผง
ข้อมูล JSON: ส่งออบเจ็กต์ JSON ไปยัง setObject()
นิพจน์ JavaScript: ส่งนิพจน์ไปยัง setExpression() เครื่องมือสำหรับนักพัฒนาเว็บจะประเมินนิพจน์ในบริบทของหน้าที่ตรวจสอบ จากนั้นแสดงค่าที่ส่งกลับ

สำหรับทั้ง setObject() และ setExpression() แผงจะแสดงค่าตามที่จะปรากฏในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ อย่างไรก็ตาม setExpression() ให้คุณแสดงองค์ประกอบ DOM และออบเจ็กต์ JavaScript ที่กำหนดเองได้ ขณะที่ setObject() รองรับเฉพาะออบเจ็กต์ JSON เท่านั้น

สื่อสารระหว่างคอมโพเนนต์ของส่วนขยาย

ส่วนต่อไปนี้จะอธิบายวิธีที่มีประโยชน์เพื่อให้คอมโพเนนต์ส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บสื่อสารกันได้

แทรกสคริปต์เนื้อหา

หากต้องการแทรกสคริปต์เนื้อหา ให้ใช้ scripting.executeScript() ดังนี้

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

คุณเรียกข้อมูลรหัสแท็บของหน้าต่างที่ตรวจสอบได้โดยใช้พร็อพเพอร์ตี้ inspectedWindow.tabId

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

ประเมิน JavaScript ในหน้าต่างที่ตรวจสอบ

คุณใช้เมธอด inspectedWindow.eval() เพื่อเรียกใช้โค้ด JavaScript ในบริบทของหน้าเว็บที่ตรวจสอบได้ คุณเรียกใช้เมธอด eval() จากหน้าเครื่องมือสำหรับนักพัฒนาเว็บ แผง หรือแผงแถบด้านข้างได้

ข้อควรระวัง: ใช้ eval() เฉพาะเมื่อคุณต้องการเข้าถึงเนื้อหา JavaScript ของหน้าที่ตรวจสอบแล้ว ไม่เช่นนั้น เราขอแนะนำให้ใช้เมธอด scripting.executeScript() เพื่อเรียกใช้สคริปต์ ดูข้อมูลเพิ่มเติมได้ที่ inspectedWindow

โดยค่าเริ่มต้น ระบบจะประเมินนิพจน์ในบริบทของเฟรมหลักของหน้า inspectedWindow.eval() ใช้บริบทและตัวเลือกการดำเนินการสคริปต์เหมือนกับโค้ดที่ป้อนในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ ทำให้เข้าถึงฟีเจอร์ของ Console Utiities API สำหรับ DevTools เมื่อใช้ eval() ตัวอย่างเช่น SOAK ใช้ข้อมูลดังกล่าวเพื่อตรวจสอบองค์ประกอบ

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

คุณยังตั้งค่า useContentScriptContext เป็น true ได้ด้วยเมื่อเรียกใช้ inspectedWindow.eval() เพื่อประเมินนิพจน์ในบริบทเดียวกันกับสคริปต์เนื้อหา หากต้องการใช้ตัวเลือกนี้ ให้ใช้การประกาศสคริปต์เนื้อหาแบบคงที่ก่อนเรียกใช้ eval() ไม่ว่าจะโดยการเรียกใช้ executeScript() หรือโดยระบุสคริปต์เนื้อหาในไฟล์ manifest.json ก็ได้ หลังจากบริบทสคริปต์บริบทโหลดขึ้น คุณจะใช้ตัวเลือกนี้เพื่อแทรกสคริปต์เนื้อหาเพิ่มเติมได้ด้วย

ส่งองค์ประกอบที่เลือกไปยังสคริปต์เนื้อหา

สคริปต์เนื้อหาไม่มีสิทธิ์เข้าถึงองค์ประกอบที่เลือกปัจจุบันโดยตรง แต่โค้ดใดก็ตามที่คุณใช้ inspectedWindow.eval() จะเข้าถึงคอนโซลสำหรับนักพัฒนาเว็บและคอนโซลยูทิลิตีของ Console ได้ เช่น ในโค้ดที่ได้รับการประเมิน คุณจะใช้ $0 เพื่อเข้าถึงองค์ประกอบที่เลือกได้

วิธีส่งองค์ประกอบที่เลือกไปยังสคริปต์เนื้อหา

สร้างเมธอดในสคริปต์เนื้อหาที่นำองค์ประกอบที่เลือกเป็นอาร์กิวเมนต์
```
function setSelectedElement(el) {
    // do something with the selected element
}
```
เรียกใช้เมธอดจากหน้าเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ inspectedWindow.eval() ด้วยตัวเลือก useContentScriptContext: true
```
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
```

ตัวเลือก useContentScriptContext: true จะระบุว่าต้องประเมินนิพจน์ในบริบทเดียวกับสคริปต์เนื้อหา จึงจะเข้าถึงเมธอด setSelectedElement ได้

รับ `window` ของแผงข้อมูลอ้างอิง

หากต้องการเรียกใช้ postMessage() จากแผงเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะต้องมีการอ้างอิงออบเจ็กต์ window ของแผง วิธีรับหน้าต่าง iframe ของแผงจากเครื่องจัดการเหตุการณ์ panel.onShown

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

ส่งข้อความจากสคริปต์ที่แทรกไปยังหน้าเครื่องมือสำหรับนักพัฒนาเว็บ

โค้ดที่แทรกลงในหน้าเว็บโดยตรงโดยไม่ใช้สคริปต์เนื้อหา ซึ่งรวมถึงการเพิ่มแท็ก <script> หรือการเรียกใช้ inspectedWindow.eval() จะส่งข้อความไปยังหน้าเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ runtime.sendMessage() ไม่ได้ เราขอแนะนำให้คุณรวมสคริปต์ที่แทรกเข้ามากับสคริปต์เนื้อหาที่ทำหน้าที่เป็นสื่อกลาง และใช้เมธอด window.postMessage() แทน ตัวอย่างต่อไปนี้ใช้สคริปต์พื้นหลังจากส่วนก่อนหน้า

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

ดูเทคนิคการรับส่งข้อความทางเลือกอื่นๆ ได้ใน GitHub

ตรวจจับเวลาเปิดและปิดเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการติดตามว่าหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่หรือไม่ ให้เพิ่ม Listener onConnect ลงใน Service Worker และเรียก connect() จากหน้าเครื่องมือสำหรับนักพัฒนาเว็บ เนื่องจากแต่ละแท็บสามารถเปิดหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บของตัวเองได้ คุณจึงอาจได้รับเหตุการณ์การเชื่อมต่อหลายรายการ หากต้องการติดตามว่าหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่หรือไม่ ให้นับเหตุการณ์การเชื่อมต่อและยกเลิกการเชื่อมต่อดังที่แสดงในตัวอย่างต่อไปนี้

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

หน้าเครื่องมือสำหรับนักพัฒนาเว็บจะสร้างการเชื่อมต่อดังนี้

// devtools.js

// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

ตัวอย่างส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บ

ตัวอย่างในหน้านี้มาจากหน้าต่อไปนี้

ส่วนขยายเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Polymer Devtools - ใช้ตัวช่วยเหลือต่างๆ ที่ทำงานในหน้าโฮสต์เพื่อค้นหาสถานะ DOM/JS เพื่อส่งกลับไปยังแผงที่กำหนดเอง
React DevTools Extension - ใช้โมดูลย่อยของตัวแสดงผลเพื่อใช้คอมโพเนนต์ UI ของ DevTools ซ้ำ
Ember Inspector - แกนส่วนขยายที่ใช้ร่วมกันพร้อมอะแดปเตอร์สำหรับทั้ง Chrome และ Firefox
Coquette-inspect - ส่วนขยายที่อิงตาม React ที่เรียบง่าย ซึ่งมีการแทรก Agent การแก้ไขข้อบกพร่องลงในหน้าโฮสต์
ส่วนขยายตัวอย่างมีส่วนขยายที่คุ้มค่ากว่าในการติดตั้ง ลองใช้ และเรียนรู้

ข้อมูลเพิ่มเติม

ดูข้อมูลเกี่ยวกับ API มาตรฐานที่ส่วนขยายใช้ได้ที่หัวข้อ chrome* API และ API เว็บ

ส่งความคิดเห็นถึงเรา ความคิดเห็นและคำแนะนำของคุณจะช่วยเราปรับปรุง API นี้ได้

ตัวอย่าง

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