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

Question

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

Answer 1

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