ส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บจะเพิ่มฟีเจอร์ไปยังเครื่องมือสำหรับนักพัฒนาเว็บใน 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()
จากหน้าเครื่องมือสำหรับนักพัฒนาเว็บ แผง หรือแผงแถบด้านข้างได้
โดยค่าเริ่มต้น ระบบจะประเมินนิพจน์ในบริบทของเฟรมหลักของหน้า
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 เครื่องมือสำหรับนักพัฒนาเว็บได้ในตัวอย่าง