CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension
Chrome_n3bie
Chrome_n3bie

Reputation: 59

Chrome Automation using an extension; clicking buttons and filling forms

After looking around Stack Overflow for a while, and all the past questions relating to this topic, i haven't really been able to find a suitable answer/question that provides an example of a situation similar to mine. I basically need to a chrome extension (upon an icon click) to click certain objects/buttons on a page, after filling in certain relevant forms, for example a login button after filling in the relevant username and password boxes, or the search button of a search engine (e.g. Google) after filling in the search bar.

Also, (not directly relevant) before the extension starts to automate certain browser actions, it will open the page i want to edit in a new page, and close the current tab. If it helps, here is some working code i managed to put together so far:

background.js

    chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({
        url: "http://google.com"
    });

    chrome.tabs.getSelected(function (tab2) {
        chrome.tabs.remove(tab.id, function() { });
    });

});

I am very new to chrome extensions, and if someone could include examples with their explanation, i would be very grateful! Many thanks in advance! :)

Upvotes: 5

Views: 3916

Answers (1)

Calvin Belden
Calvin Belden

Reputation: 3104

I think what you're looking for is a content script. A content script is injected into every page specified by your extension's manifest file.

Content scripts have access to the DOM that they're injected into, so they can perform actions on DOM elements. Below is an example excerpt from a manifest.json file that loads jquery as well as a content script:

manifest.json

{
  ...

  "content_scripts": [
    {
      "matches": ["http://www.target-page.com"],
      "scripts": ["https://code.jquery.com/jquery-1.11.2.js", "my-script.js"]
    }
  ]

  ...
  }

content.js

$(document).ready(function() {

   /* Get a reference to your form of interest. */
   var form = $('#form-id");
   /* ... Manipulate the form */

   /* Get a reference to your button of interest. */
   var button = $('#button-id');
   /* ... Manipulate the button (ie button.click())*/
 });

Upvotes: 2

Related Questions