Chrome Extension: Open tab, go to url, fill form and submit form

Question

I am following a tutorial here http://www.blackweb20.com/2010/01/11/creating-your-own-google-chrome-extension/

I can open fine a tab with a custom extension and load a url, and I would like to fill and submit a form with javascript on the page opened. For example, could I submit a search on google.com?

Here is what I have so far:

manifest.json
{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background_page": "background.html",
  "permissions": [
    "tabs"
  ]
}

background.html

<script>

// get tab http://stackoverflow.com/questions/1979583/how-can-i-get-the-url-for-a-google-chrome-tab


chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({'url': "http://google.com"}, function(tab) {
    // Tab opened. Wait until page loads, from here it is not working
    jQuery(document).ready(function() {
        jQuery('#tsf').submit();
        });
  });
});
</script>

Answer 1

Your jQuery code is getting executed in the background page not the new tab. Try using chrome.tabs.executeScript to execute the submit in the tab environment.

Answer 2

While you could do this using the chrome extension, I would suggest you to look into Selenium Browser Automation

It will also help you do the same in multiple browser instead of just chrome.