Check to see if image is present

[England]

Hello. I'm brand new to coding & I'm struggling a bit. Excuse me if this is in the wrong section or if I don't make sense.

How do I check if a certain image is present in a webpage & display a message box if it is?

e.g.
If the webpage contains image.jpg then display a message box
If the webpage doesn't contain image.jpg then refresh the page & check again

The script needs to check another webpage, by the way, not the page the script is being run on.

Thank you in advance.

[Old Pedant]

The script needs to check another webpage, by the way, not the page the script is being run on

It can't. Unless both web pages come from the same web site. JavaScript can *NOT* do cross-site scripting.

[England]

Originally Posted by Old Pedant

It can't. Unless both web pages come from the same web site. JavaScript can *NOT* do cross-site scripting.

It's going to be run locally as a plugin for Chrome. The idea was to have it so I'd open the webpage, turn on the plugin (extension as Chrome calls it) & it'll keep checking that page for image.jpg. Maybe I was a bit misleading by saying that - sorry.

Thanks for replying.

[Old Pedant]

Oh...okay.

var images = document.getElementsByTagName("img");
var found = false; // or null
var lookFor = /xxxx.jpg$/i;

for ( var i = 0; i < images.length; ++i )
{
    if ( lookFor.test( images[i].src ) 
    {
        found = true; // or found = images[i] if you want a reference to it 
        break;
    }
}
if ( found ) ... 
or 
if ( found != null ) ...

[England]

I'm not too sure how I'd get it to work just from that.

Is it possible I can have 2 buttons, one that says start & one that says stop? When start's clicked, it keeps checking & refreshing until I click stop. It'd be good if the page was allowed to load completely before it checks & then maybe waits a second before refreshing (to prevent throttling).

I hope I'm not being a pain. Like I said, I'm completely new. It'd be helpful if you could explain each line of code so that I can learn it better, too.

Thank you.

[Old Pedant]

I don't know how Chrome plugins work. I assumed you knew that part.

I don't understand how you can add buttons to an existing web page just using the plugin. Does it somehow insert new stuff into the existing HTML???

Sorry. You'll have to figure that part out.

Annotating my code:

// get a collection of *ALL* <img> tags on the page
var images = document.getElementsByTagName("img");

// initialize our "found" variable to indicate not found
var found = false; // or null

// this is the image name (src=".../xxxx.jpg") that you want to look for
// we use a regular exprssion because
// (1) the ending $ means that you want to find xxxx.jpg at the end of the src= attribute
// (2) the /i on the end means "ignore case"
var lookFor = /xxxx.jpg$/i;

// so look through all the <img> tags on the page
for ( var i = 0; i < images.length; ++i )
{
    // if our regular expression matches the .src of any <img>...
    if ( lookFor.test( images[i].src ) 
    {
        // change our "found" flag to indicate we found a match
        found = true; // or found = images[i] if you want a reference to it 
        // ...and exit the for loop
        break;
    }
}

[England]

If I understood correctly, Chrome lets you insert your javascript into a webpage you're on automatically or at the click of a button (the button being the extension itself so that when you click the extension, it inserts the code).

Here's the link: clicky click.

[Old Pedant]

Hmmm...I have a great use for this! Will have to experiment.

[England]

Originally Posted by Old Pedant

Hmmm...I have a great use for this! Will have to experiment.

Brilliant! Will you get back to me with your results?