How can I make a Chrome extension automatically click a button when a page loads?

Question

I'm trying to create a Google Chrome extension that presses a button on page load. I've been able to trigger the button using VBscript for Internet Explorer by using this code:

IE.Navigate("javascript:changeIframe();")

But, now I need to do it in Google Chrome via an extension. However, the button does not have an id:

<input type="button" value="Start!" onclick="javascript:changeIframe();">

and here's what I've tried so far and nothing seems to work:

window.onload="javascript:changeIframe()";
javascript:changeIframe();
document.getElementById('').click();
document.getElementById('').submit();

It seems that .click and .submit is not defined in Google-Chrome's javascript?

The weird thing is that when I use this script:

javascript:changeIframe();

in Chrome's javascript console, it presses the button automatically and everything works fine. But, when I put the same script in my .js file it does not work.

I just need to know what I have to put inside my .js in order to press the button automatically on page load.

Answer 1

The traditional way to do this is to inject the code¹:

var scriptNode          = document.createElement ('script');
scriptNode.textContent  = 'changeIframe ();';

document.body.appendChild (scriptNode);

You won't normally have to listen for onload either, as content scripts will fire roughly at that point by default.

¹ The extension JS operates in an "Isolated World" and cannot interact with the page's javascript without some tricks that are not needed here.

Answer 2

Great that you got a solution, but thought Id show you another way of simulating a click.
With this way you dont have to inject code or know the function that the onclick will run, just get the button and simulate a click....

// https://developer.mozilla.org/en/DOM/element.dispatchEvent
function simulateClick(obj) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var canceled = !obj.dispatchEvent(evt);      
/*

  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
  */
}

var what = document.querySelector('input[type="button"][value="Start!"]');
simulateClick(what);