從Chrome擴展程序內調用DevTools的inspect（）函數

Question

我想創建一個擴展，該擴展可以以編程方式檢查元素，就像用戶在元素上單擊鼠標右鍵並單擊“檢查”一樣。 我希望最好通過清單中通過devtools_page設置的devtools頁面來實現。 我想要確切的行為-元素面板打開，該元素在左側突出顯示，其樣式在右側欄。

我將如何實現？

我嘗試過的

首先，我希望擴展程序在單擊頂部的擴展程序圖標時附加調試器並檢查文檔正文。 這是我的devtools_page ：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.debugger.attach({tabId: tab.id}, "1.0", function () {
        chrome.debugger.sendCommand({tabId: tab.id}, 'Runtime.evaluate', {
            expression: 'console.log(document.body); inspect(document.body);'
        }, function () {
            console.log('Result:', arguments);
        }); 
    });
});

現在，如果我查看正在檢查的頁面的DevTools窗口，則可以正確看到body的日志，然后單擊它以在檢查器中打開該元素。 但是，如果我前往擴展的devtools頁面和檢查，我可以看到“結果：”日志那里記載：

Result:
Arguments(1)
  0:
    exceptionDetails: {columnNumber: 28, exception: {…}, exceptionId: 2, lineNumber: 0, scriptId: "88", …}
    result:
      className: "ReferenceError"
      description: "ReferenceError: inspect is not defined↵    at <anonymous>:1:29"
      objectId: "{"injectedScriptId":1,"id":1}"
      subtype: "error"
      type: "object"
      __proto__: Object
    __proto__: Object

因此，即使評估后的代碼可以訪問我要檢查的元素，也無法訪問inspect()函數。 顯然，它在頁面的上下文中執行，而不是在其DevTools的上下文中執行。

如何通過擴展程序以編程方式在DevTools中設置被檢查元素？

Answer 1

正如@Pa Wa指出的那樣， chrome.devtools.inspectedWindow通過其eval()方法完成了這項工作：

chrome.devtools.inspectedWindow.eval('inspect(document.body)');

它甚至不需要附加調試器。