Updating knockout.js observables from inside Chrome content script "isolated world"

Question

I have a problem that I've tried to solve in many different ways, but I am completely stumped and nothing that I've been able to find can help...

The Problem

I am writing a Chrome extension to modify the values of some input elements on a webpage before they're submitted via AJAX. The elements are created using a Knockout model that is constructed based upon the response of an initial AJAX request. The problem is that whenever my Chrome content script updates the values of the input elements, the Knockout observables do not update (and the final POST request uses the serialized Knockout objects, which have not changed).

Several solutions that I've seen have suggested either,

1. Updating the Knockout observable directly -- Not possible, as my script is in its own sandbox (or, "isolated world")
2. Manually triggering the change event on the element after updating its value -- I so incredibly wish that this would work. However, it seems to do nothing. My understanding after playing with this for a couple of hours today is that this event is also isolated to the sandbox (but I could be wrong).

The only possible solution that I can see (and this is ugly) is blocking the POST and directly modifying the contents of the request. But that seems so silly when I could just modify the form in the DOM...

Any ideas? I could really use some assistance.

Answer 1

I figured it out, thanks to this answer. I did not know that I could inject my JavaScript into the page; so, I'm injecting the change event trigger into the DOM, which results in it being called in the page scope instead of in my content script scope.

var script = document.createElement('script');
script.textContent = "$(\'.myInputField\').eq(" + i + ").change()";
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);