使用 chrome devtools 扩展突出显示节点[已关闭]

Question

我想以与元素检查器（在开发工具中）相同的方式从我的 chrome 开发工具扩展中突出显示 dom 元素。有没有一些特殊的 API 可以做到这一点？ 谢谢

Answer 1

每当您使用 DevTools 控制台评估检查页面中的某些代码时，DevTools 都会公开一系列称为“命令行 API”的帮助程序调用。此 API 包括 inspect() 调用，其效果与用户从上下文菜单调用“检查元素”相同，即打开“元素”面板并突出显示该节点。 Inspect() 调用以及命令行 API 的其余部分可用于使用 chrome.devtools.inspectedWindow.eval() 由 DevTools 扩展评估的代码，因此您可以执行以下操作： chrome.devtools.inspectedWindow.eval("inspect(document.body)");

chrome.devtools.inspectedWindow.eval(
  `inspect(document.querySelector("${
    JSON.stringify('a[title*="foo"]')
  }"))`,
  // Make sure you already injected a content script on this URL
  // to guard against the page redefining `inspect` and `document.querySelector`
  { useContentScriptContext: true }
);

如果您只想在检查的页面一侧突出显示，而“元素”面板上没有发生任何事情（即，当您将鼠标悬停在页面上，并且“元素”面板中的观察镜打开了 DOM 搜索模式时），则必须您自己实现这个，因为目前没有 API。我建议使用内容脚本向元素添加自定义样式。