Javascript 将xpath放入侧栏扩展html中的选定元素

因此，我正在尝试开发一个chrome扩展，它将从页面导出所选元素的XPath列表。但是，我无法在devtools面板中计算当前选定元素的xpath

我尝试使用getPathTo from answer，但该函数无法访问对元素$0的引用

使用此代码，我可以打印新选定元素的标记：

chrome.devtools.panels.elements.onSelectionChanged.addListener(function () {
    var expression = "(function(){console.log($0);})()"
    chrome.devtools.inspectedWindow.eval(expression)
});

但如果我尝试：

chrome.devtools.panels.elements.onSelectionChanged.addListener(function () {
    var expression = "(function(){console.log(getPathTo($0));})()"
    chrome.devtools.inspectedWindow.eval(expression)
});

它抱怨未定义对$0的引用

代码还具有设置侧栏HTML的功能：

chrome.devtools.panels.elements.createSidebarPane(
    "Chrome Extension",
    function (sidebar) {
        sidebar.setPage("sidebar/sidebar.html");
    }
);

---

sidebar/sidebar.html是一个简单的html页面，里面有一个项目列表，我想在其中添加所有选定元素的路径，以及一个将列表复制到剪贴板的按钮。如何使用对函数中选定元素的引用？另外，如何将结果传递到HTML页面？

chrome.devtools.inspectedWindow.eval在选项卡页面环境中运行，而不是在扩展的环境中运行。网页是一个完全不同的上下文，它有自己的

文档

、DOM、

窗口

、全局变量等等。要在那里调用getPathTo，您需要将它放在那里

chrome.devtools.inspectedWindow.eval(`(${() => {
  console.log(getPathTo($0));
  function getPathTo(element) {
    // ...................
    // ..... code
    // ...................
  }
}})()`);

更安全的方法 默认情况下，eval（）在页面上下文中运行，因此在某些页面上，如果覆盖或损坏标准对象和原型，代码可能会失败。您可以在的孤立世界中运行代码，而不是：

---

chrome.devtools.inspectedWindow.eval在选项卡页环境中运行，而不是在扩展的环境中运行。网页是一个完全不同的上下文，它有自己的

文档

、DOM、

窗口

、全局变量等等。要在那里调用getPathTo，您需要将它放在那里

chrome.devtools.inspectedWindow.eval(`(${() => {
  console.log(getPathTo($0));
  function getPathTo(element) {
    // ...................
    // ..... code
    // ...................
  }
}})()`);

更安全的方法 默认情况下，eval（）在页面上下文中运行，因此在某些页面上，如果覆盖或损坏标准对象和原型，代码可能会失败。您可以在的孤立世界中运行代码，而不是：

---

从概念上讲，这两个表达式都是相同的，因此观察到的行为肯定看起来像一个bug，但我无法重现（代码对我来说很有用），因此我猜您没有在页面上下文中定义

getPathTo

，因为eval在页面上下文中运行，除非您另有指示，请参阅文档。@wOxxOm我真的很难理解文档，而且缺少示例。。。如何在页面上下文中定义getPathTo？另外，如果我将{useContentScriptContext:true}作为参数传递给eval，则不会看到任何错误消息和日志消息。。。似乎什么都没有发生。我的意思是缺少使用inspectedWindow的示例。我知道有一个示例页面，但没有一个示例使用此功能，文档中的代码片段也没有多大帮助。文档说您需要在页面中运行内容脚本，所以我猜您没有。第二部分，脚本之间的消息，我发现两个表达式在概念上都是相同的，所以观察到的行为看起来肯定像一个bug，虽然我无法重现（代码对我来说很有用），所以我猜您没有在页面上下文中定义

getPathTo

，因为eval在页面上下文中运行，除非您另有指示，请参阅文档。@wOxxOm我真的很难理解文档，而且缺少示例。。。如何在页面上下文中定义getPathTo？另外，如果我将{useContentScriptContext:true}作为参数传递给eval，则不会看到任何错误消息和日志消息。。。似乎什么都没有发生。我的意思是缺少使用inspectedWindow的示例。我知道有一个示例页面，但没有一个示例使用此功能，文档中的代码片段也没有多大帮助。文档说您需要在页面中运行内容脚本，所以我猜您没有。第二部分，脚本之间的消息，我发现