Chrome扩展使用chrome.devtools.inspectedWindow API无法获取被检查元素

报错原因 #

1. $0是Chrome DevTools控制台专属变量，仅在DevTools自身执行上下文有效，默认chrome.devtools.inspectedWindow.eval在页面执行上下文运行代码，因此找不到$0变量。
2. inspect()是DevTools内置函数，页面上下文不存在该函数，直接调用会触发未定义错误。

修复代码 #

修改devtools.js #

function getInspectedElement() {
  chrome.devtools.inspectedWindow.eval(
    // 直接在DevTools上下文提取选中元素的关键属性
    `{
      tagName: $0.tagName,
      id: $0.id,
      className: $0.className,
      computedStyle: getComputedStyle($0).cssText,
      outerHTML: $0.outerHTML
    }`,
    { useContentScriptContext: false }, // 指定在DevTools上下文执行代码
    function (result, exceptionInfo) {
      if (!exceptionInfo) {
        console.log('选中元素详情:', result);
      } else {
        console.error('获取元素失败:', exceptionInfo);
      }
    }
  );
}

chrome.devtools.panels.elements.onSelectionChanged.addListener(getInspectedElement);

chrome.devtools.panels.create("My Panel", null, "devtools/panel.html", function(panel) {});

优化manifest配置 #

去掉不必要的debugger权限：

{
    "manifest_version": 3,
    "name": "Component Selector",
    "version": "1.0",
    "devtools_page": "devtools/devtools.html",
    "permissions": ["activeTab"]
}

关键说明 #

• useContentScriptContext: false：将代码执行环境切换到DevTools自身上下文，此时才能访问$0这类控制台专属变量。
• 远程对象限制：通过eval返回的DOM元素是远程对象，无法直接在扩展代码中访问其所有属性，需在eval的代码字符串内直接提取所需属性后返回。

内容的提问来源于stack exchange，提问作者Rohit