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

Question

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

我尝试使用 this 答案中的 getPathTo，但该函数无法访问对元素 $0 的引用。

使用这段代码，我可以打印新选择元素的标签：

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

但如果我尝试：

chrome.devtools.panels.elements.onSelectionChanged.addListener(function () {
    var expression = "(function(){console.log(getPathTo([=12=]));})()"
    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 运行s 在标签页环境中，而不是在扩展环境中。网页是一个完全不同的上下文，它有自己的 document、DOM、window、全局变量等等。为了能够在那里调用 getPathTo，你需要把它放在那里。

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

更安全的方法

默认情况下，页面上下文中的 eval() 运行s 因此在某些页面上，如果它们覆盖或破坏标准对象和原型，您的代码可能会失败。您可以运行 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([=11=]));
    }})()`, {
      useContentScriptContext: true,
    });
  });
});

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

Put xpath to selected element in sidebar extension html

javascript

google-chrome-extension

google-chrome-devtools

更安全的方法