Safari Extension – Updating angularJS model on form autocomplete

Question

I’m writing in hopes of finding out how to trigger angularJS to update its model when performing autocompletion from a browser extensions. I know that some other apps (password managers like LastPass) do this successfully.

I’m building a little Safari extension that will help me auto complete Apple’s (ridiculous) Sandbox User creation form, which has 10 input fields and a couple of selector elements.

So far I have managed to get the input fields using jQuery and to set their value using .val(). However, this does not trigger angularJS to update its model, so even though there is text in the input fields, angular thinks there is no text and fails to validate the form.

The problem could be easily fixed if I can get access to the angular object, but I can’t seem to be able to do that. My injected script returns undefined when I try to access angular. So I’m thinking I’m either retrieving the angular object incorrectly or that I should be solving this a different way.

To note that I have already tried some of the other tricks mentioned around the web: input.trigger('input'); and other such stuff.

Answer 1

Sounds like you need to fool the form into thinking you've actually typed something into the input, instead of just setting the input's value, which I do not believe causes a focus event. Try using JQuery to focus and then unfocus the inputs. This should simulate the user clicking on the input field and then leaving the input field. If Apple built their form the right way, this should trigger validations/model updates. Hope this helps.