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

Question

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

我尝试使用this answer中的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页面？

Answer 1

chrome.devtools.inspectedWindow.eval在标签页环境中运行，而不是在扩展的环境中运行。web页面是一个完全不同的上下文，它有自己的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,
    });
  });
});