1

I have created a content script extension to auto fill user and password fields on webpage. It works OK in normal form like below -

<input name="userId" class="form-field" id="userId" placeholder="Username" autocomplete="off" tabindex="1" type="text">
<input name="password" class="form-field" id="password" placeholder="Password" autocomplete="off" tabindex="2" type="password">
<input name="signIn" class="btnBlue" id="signIn" value="Sign In" tabindex="4" onclick="checkIECompat()" type="button">

However, when it comes to Angular-generated form, no matter how hard I try to play with those ng-xxxxxx classes, it does not work.

<input type="text" class="form-control text-center modal-header ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" name="idCard" placeholder="User Name" maxlength="20" autocomplete="off" ng-model="request.userName" required="">
<input type="password" class="form-control text-center ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required" name="password" placeholder="Password" aria-describedby="" autocomplete="off" ng-model="request.password" style="margin-top:15px" required="">
<button type="submit" class="btn btn-blue btn_login" value="Log In" ng-click=" login('/payment')" ng-disabled="loginForm.$invalid" disabled="disabled">เข้าสู่ระบบ <span class="glyphicon glyphicon-log-in" style="font-size:14px" aria-hidden="true"></span></button>

Above is the code when page is first loaded. I manually key in the form and inspect the code when all validity have been checked and the submit button is enabled. Then, I use my program to change those classes and other details to make them identical (except its order). I even force enable the button by removing disabled attribute but it does not help. The button can be clicked but nothing happens.

My question is "is it possible to achieve this?". Are there any limitations concerning Angular that prevent the content script running successfully? Or it is just the coding issue that I have not been able to make it work.

One more problem is I do not own Angular code. It belongs to a website that I wan to use my extension with.

piptan
  • 65
  • 2
  • 11
  • Correctly handling sensitive data (user names and passwords) is a *hard* problem that even people with decades of experience in computer security get dangerously wrong from time to time. A [password manager](https://www.google.com/search?q=password+manager) is of critical concern. It is **not** the type of project that is a good idea for any one person. This particularly true if they don't have *long* experience in the area of securely handling data, working with extensions, working with web pages, etc. Based on your question, I suggest that you seriously consider other projects first. – Makyen Mar 05 '17 at 18:12
  • Do you dispatch an `input` event? Could be [Update Angular model after setting input value with jQuery](//stackoverflow.com/q/17109850) – wOxxOm Mar 05 '17 at 18:56
  • @Makyen : Thanks for your concern. I have considered this as well. So, my extension will not store any user nor password. It just relays what user keys to the form on a desired page. – piptan Mar 05 '17 at 19:31
  • @wOxxOm : Thanks for pointing this out. Yes, my program needs to trigger that event after setting the value. It works now. I will update my code in the answer. – piptan Mar 05 '17 at 19:34

1 Answers1

4

As guided by @wOxxOm, after add the following lines to trigger the event after setting input value (to update Angular model), my problem is solved.

document.getElementsByName("idCard").item(0).value = 'XXXXX';
document.getElementsByName("idCard").item(0).dispatchEvent(new Event("input"));
piptan
  • 65
  • 2
  • 11