Question

因此，我正在尝试开发一个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页面？

Answer 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,
    });
  });
});

将xpath放在侧边栏扩展名html

1 个答案:

更安全的方法