1

I've a page and I want to fill the login/password fields and autoclick "Sign-In" submit button. I've mentioned all the details in here.

The page is using AngularJS.

It does not work since the login/password fields are not detected. I've tried many ways including Using page's angular JS in chrome extension

For example. I've tried this code( and many others like Trigger a keypress/keydown/keyup event in JS/jQuery? ) but none is able to make the page detect the autofilled login and password:

$("#loginEmailMobile").val(user_selections.freecharge_details.login).trigger('input').keydown().keyup();   
         $("input#clientpassword").val(user_selections.freecharge_details.password).trigger('input').keydown().keyup();

Another crude way is to block the the AngularJs library from the background page and try to make it work. But this too does not work.

How can I make the form autofill for this page?

Community
  • 1
  • 1
user5858
  • 1,082
  • 4
  • 39
  • 79
  • 1
    We would need a [MCVE](http://stackoverflow.com/help/mcve) to answer your question – maurycy Nov 26 '16 at 17:49
  • 1
    The reason that a [mcve] is required is that *we want to help*. It is **much** easier to help if we don't have to recreate any of the code needed to duplicate the problem. This is code that you already have. So, please help us to help you and provide a *complete* [mcve] that duplicates the problem with such questions. Without a [mcve] the amount of effort required to even begin to help you is **much** higher which *significantly* reduces the number of people willing/able to help you. Even if we put out the extra effort, we have to *guess* at significant portions of what your problem might be. – Makyen Nov 28 '16 at 08:47
  • Have you tried [this](http://stackoverflow.com/questions/5712796/html-login-form-provide-username-autofill-password) – George Nov 28 '16 at 08:54
  • To get an answer, you would have been **far** better off [edit]ing the question to be on-topic (include a **complete** [mcve]) rather than posting a bounty. The primary reason you did not get anyone to answer your question is because the question is written in a way that makes it almost unanswerable. I recommend you take a look at the various resources available on site (e.g. [ask]). In addition to the links on that page, you might want to read [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). – Makyen Nov 28 '16 at 09:06
  • As this question is currently written, I would normally vote to close it as either "Unclear what you are asking", or a debugging question that does not have a [mcve], problem description, and description of desired operation, or perhaps with a close reason of "too broad". Given that there is a bounty, we can not close the question. However, please take this comment as a strong suggestion that you [edit] the question to improve it. – Makyen Nov 28 '16 at 09:07

1 Answers1

1

In order for angular to record that the content of the input has changed, you need to manually trigger an input event after setting the content of the fields.

The code would roughly translate into this: 

document.getElementById('loginEmailMobile').value = 'test@test.com'
document.getElementById('loginEmailMobile').dispatchEvent(new Event('input'))
document.getElementById('clientpassword').value = 'password'
document.getElementById('clientpassword').dispatchEvent(new Event('input'))
document.getElementById('signInButton').dispatchEvent(new Event('click'))

This code, when pasted into Chrome's console, triggers a form submit. I bet it would work with change events instead too.

Since you are making a Chrome extension, this code will need to be injected into the page. You make this by specifying a "content_scripts" key in your manifest.json like so (note your site's URL is present so that your script inject.js, which contains the logic to trigger the form changes, doesn't get injected in all pages you visit):

"content_scripts": [
    {
        "matches": ["https://login.freecharge.in/*"],
        "js": ["js/inject.js"]
    }
],

Then, in your extension's popup script, for example, you would use the chrome.tabs API's executeScript method to call the function you injected with inject.js.

You could also directly inject the above code with executeScript and skip script injection altogether, but as your code grows longer, you might want to have everything in a proper js file somewhere and just call functions with this API.

beeb
  • 1,187
  • 11
  • 32
  • Don't know why when same thing is done from the content script will not work. – user5858 Nov 29 '16 at 12:07
  • I don't know if you tried with jQuery's `trigger` function but I noticed that in some cases when using frameworks like React or Angular, using a native Event with `dispatchEvent` works better. – beeb Nov 29 '16 at 20:37