将xpath放到侧边栏扩展html中的选定元素答案

【问题标题】：Put xpath to selected element in sidebar extension html将xpath放到侧边栏扩展html中的选定元素
【发布时间】：2020-04-08 19:32:18
【问题描述】：

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

我尝试使用来自 this 答案的 getPathTo，但该函数无法访问对元素 $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 页面？

【问题讨论】：

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

标签： javascript google-chrome-extension google-chrome-devtools

【解决方案1】：

chrome.devtools.inspectedWindow.eval 在标签页环境中运行，而不是在扩展程序的环境中。网页是一个完全不同的上下文，它有自己的document、DOM、window、全局变量等等。为了能够在那里调用 getPathTo，你需要把它放在那里。

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

更安全的方法

默认情况下 eval() 在页面上下文中运行，因此在某些页面上，如果它们覆盖或破坏标准对象和原型，您的代码可能会失败。您可以改为在content scripts 的孤立世界中运行代码：

chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
  chrome.tabs.executeScript({
    code: `function getPathTo(element) {
      // ...................
      // ..... code
      // ...................
    }`,
    runAt: 'document_start',
  }, () => {
    chrome.devtools.inspectedWindow.eval(`(${() => {
      console.log(getPathTo($0));
    }})()`, {
      useContentScriptContext: true,
    });
  });
});

【讨论】：