$x() 函数未在 Chrome 扩展、内容脚本中定义答案

【问题标题】：$x() function is not defined inside a Chrome extension, content script$x() 函数未在 Chrome 扩展、内容脚本中定义
【发布时间】：2013-08-28 05:32:55
【问题描述】：

$x("//a[contains(@href,'.jpg')]");

在开发人员工具命令提示符下按预期工作。但是，当在扩展程序的内容脚本中时，我得到一个“$x is not defined”。

为什么这在内容脚本中不可用，或者在内容脚本/Chrome 扩展程序中是否有特殊的访问方式？

我在 Debian 上使用 Chrome 22。

【问题讨论】：

提示：在控制台中输入debugger;。
对向我透露的额外信息感到困惑？
试试吧。你会看到i.stack.imgur.com/AXRPG.png
命令行 API。作为记录，我做了但得出了错误的结论：该功能在范围内并且可用。

标签： javascript google-chrome xpath google-chrome-extension content-script

【解决方案1】：

$x() 不是网页或内容脚本的运行时环境的一部分。它是the Command Line API for Chrome's DevTools 的一部分。

要在内容脚本中使用 XPath，您需要按常规方式进行，DevTools 便捷的快捷方式不可用。

您的代码如下所示：

var jpgLinks    = document.evaluate (
    "//a[contains(@href,'.jpg')]",
    document,
    null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null
);
var numLinks    = jpgLinks.snapshotLength;

for (var J = 0;  J < numLinks;  ++J) {
    var thisLink = jpgLinks.snapshotItem (J);
    console.log ("Link ", J, " = ", thisLink);
}

-- 这是$x() 在幕后为你做的事情。

当您使用它时，请考虑切换到CSS selectors。那么同样的功能是：

var jpgLinks    = document.querySelectorAll ("a[href$='.jpg']");
var numLinks    = jpgLinks.length;

for (var J = 0;  J < numLinks;  ++J) {
    var thisLink = jpgLinks[J];
    console.log ("Link ", J, " = ", thisLink);
}

——这在我的书中更可口。

【讨论】：

更正：似乎 *= 是 CSS 选择器中的通配符匹配器，而不是 $= 至少在 2021 年 2 月 22 日的 Chrome 中

【解决方案2】：

我建议将此函数添加到您的代码中：

var xpath = function (xpathToExecute) {
    var result = [];
    var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
        result.push(nodesSnapshot.snapshotItem(i));
    }
    return result;
}

只需调用它来代替 $x

【讨论】：