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

works as expected from the developer tools command prompt. But, when in an extension's content-script I get a '$x is not defined'.

Why is this not available in a content-script or is there a special way of accessing it inside a content-script / Chrome extension?

I'm using Chrome 22 on Debian.

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

works as expected from the developer tools command prompt. But, when in an extension's content-script I get a '$x is not defined'.

Why is this not available in a content-script or is there a special way of accessing it inside a content-script / Chrome extension?

I'm using Chrome 22 on Debian.

• javascript
• google-chrome
• xpath
• google-chrome-extension
• content-script

• Hint: Type debugger; in the console. – Rob W Commented Aug 25, 2013 at 22:01
• Bit confused as to what extra information that reveals to me? – citronic Commented Aug 26, 2013 at 0:03
• Just try it. You would have seen i.sstatic.net/AXRPG.png – Rob W Commented Aug 26, 2013 at 8:28
• CommandLineAPI. For the record I did but reached the wrong conclusion: that the function was in scope and available. – citronic Commented Aug 26, 2013 at 22:30

2 Answers 2

$x() is not part of the run-time environment of a web page or content script. It is a tool that is part of the Command Line API for Chrome's DevTools.

To use XPath in a content script, you need to do it the normal way, the DevTools convenient shortcut is not available.

Your code would look like this:

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

-- which is the kind of thing that $x() was doing for you, behind the scenes.

While you are at it, consider switching to CSS selectors. Then the same functionality is:

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

-- which is much more palatable in my book.

I suggest adding this function to your code:

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

and Just calling it in place of $x