时间戳

首页 > 解决方案 > 将xpath放到侧边栏扩展html中的选定元素

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

问题描述

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

我尝试使用此答案中的 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 页面？

标签： javascriptgoogle-chrome-extensiongoogle-chrome-devtools

解决方案

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

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

更安全的方法

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

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

推荐阅读