Is there an way to search INSIDE script tags on a webpage?

[Tinker]

I am used to using document.getElementById to find something very specific.

However I now want to find something that's inside script tags, when you go to "view source:

so, for example, for this random page you can "view source" and find (in page) landingImageUrl":"

<script type="a-state" data-a-state="{&quot;key&quot;:&quot;desktop-landing-image-data&quot;}">{"landingImageUrl":"https://m.media-amazon.com/images/I/41iuSZgmF2L.__AC_SX300_SY300_QL70_ML2_.jpg"}</script>

what I am looking for is that URL to a small image.

Can i do this programmatically?

• I suppose I could use a regular expression to get the image URL https://m.media-amazon.com/images/I/41iuSZgmF2L.__AC_SX300_SY300_QL70_ML2_.jpg if I had downloaded the HTML file.
• Are there any other techniques I could use, even outside javascript, such as AppleScript ?

[roosterboy]

You can run this Javascript in an Execute Javascript in Safari|Front Browser action:

const
result = Array.from(document.querySelectorAll('script[type="a-state"'), e => e.innerText)
.filter(e => e.includes('landingImageUrl'))
.map(j => {
    const obj = JSON.parse(j)
    return obj.landingImageUrl
})
return result.length == 0 ? 'no image' : result[0]

//returns:
//"https://m.media-amazon.com/images/I/41iuSZgmF2L.__AC_SX300_SY300_QL70_ML2_.jpg"

It will return the URL from the page that correspond to the landingImageUrl data. I'm sure it can be improved by someone with more JS knowledge than myself, but it works.

[Tinker]

Thanks, but when I run, the display window is blank

[roosterboy]

Sorry, yeah, I realized that I posted an incomplete solution so try the corrected version I put in last night.

[ComplexPoint]

@Tinker

any other techniques

Similarly, using an XPath expression:

Text content found by XPATH.kmmacros (2.9 KB)

---

Expand disclosure triangle to view JS source

const
    match = document.evaluate(
        kmvar.local_XPath,
        document
    )
    .iterateNext();

return null !== match
    ? JSON.parse(match.textContent).landingImageUrl
    : "XPath not matched.";

[Tinker]

thanks but nothing happens when I run it?

Text content found by XPATH .kmmacros|attachment (2.7 KB)

[Tinker]

@roosterboy

const
result = Array.from(document.querySelectorAll('script[type="a-state"'), e => e.innerText)
.filter(e => e.includes('landingImageUrl'))
.map(j => {
    const obj = JSON.parse(j)
    return obj.landingImageUrl
})
return result.length == 0 ? 'no image' : result[0]

I actually still get no result, the result is a blank display window

EXPERIMENTS RoosterBoy.kmmacros|attachment (3.6 KB)

[ComplexPoint]

@Tinker

nothing happens
no result

Sounds like there is not, in fact, a corresponding match in the page open in your browser.

To get a query selector or xpath match that does find your target, in the page which you have opened, you will need to experiment with searches in the browser's Inspect view.

(I don't think you've told us which browser you are using ?)

---

If I run the Text content found by XPath macro, with the link which you supplied opened in Safari, or in Google Chrome, the macro displays:

If you are using Firefox, or some other non Webkit and non-Chrome browser, then this approach may not work anyway.

---

Two other things to bear in mind:

• This macro assumes Keyboard Maestro Version 11
• Macros are, by default, imported in a disabled state, so need ^Click, Enable Macro before they can be used.

[Tinker]

I enabled the Macro
I am using KBM Version 10.2 and Chrome [121.0.6167.85 ] with various plugins [macOS 14.2.1]
I shall try using your example with Safari

[ComplexPoint]

@Tinker

KBM Version 10.2

That's the problem.

The version above uses the modern JS syntax (and easier – also more secure – access to Keyboard Maestro variable values) of Keyboard Maestro version 11.

Worth upgrading ...