从谷歌浏览器扩展程序在页面上触发“onchange”事件

Question

I am developing an extension to autofill a form with data from another website. I have a context menu with different options, each with different data but complete the same form. The data is dynamic and depend on another website. With "chrome.tabs.executeScript" i can insert some data, but i can not fire the event "onchange" of the fields. Can change the value of a select, but the website has an event "onchange" that does not fire when I change the value, and not get through "chrome.tabs.executeScript" run the "onchange". The error it shows is: "Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement"

EDIT:

manifest.json:

"content_scripts": [
    {
        "matches": ["url_where_the_code_must_run"],
        "js": ["billing.class.js", "script.js"]
    }
],
.
.
.

"permissions": [
    "tabs",
    "url_from_where_i_get_the_data",
    "url_where_the_code_must_run"
],

script.js:

select = document.createElement('select');
var option = document.createElement('option');
option.value = "";
option.innerHTML = "Select Client";
select.appendChild(option);
select.onchange = function() {
    var client = Billing.getClient(this.value);
    if (client) {
        document.getElementsByName("country")[0].value = client.country_id;
        document.getElementsByName("country")[0].onchange();
    }
}
for (var i = 0; i < Billing.clients.length; i++) {
    option = document.createElement('option');
    option.value = Billing.clients[i].id;
    option.innerHTML = Billing.clients[i].name;
    select.appendChild(option);
}

form.parentElement.insertBefore(select, form);

When this line is executed, show "Uncaught TypeError: Property 'onchange' of object # is not a function #HTMLSelectElement":

document.getElementsByName("country")[0].onchange();

But if I run this line directly in the console, normally runs without errors

document.getElementsByName("country")[0] is an element of the url, and "select" is an element that i create in the extension to select what client data should load.

url_where_the_code_must_run:

<script type="text/javascript">
       function customFunction() {
            // Do something that i dont care
       }
</script>
<select name="country" onchange="customFunction()">
</select>

Answer 1

Have you tried emitting the event rather than directly calling the function? As far as I remember, calling event-handlers directly can have side effects. I can't find a source at the moment though.

Try to replace

document.getElementsByName("country")[0].onchange();

with

var changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
document.getElementsByName("country")[0].dispatchEvent(changeEvent);

I also created a little fiddle: http://jsfiddle.net/d94Xb/1/

Furthermore you might look into addEventListener() and dispatchEvent() a bit more as this is the common way to register and execute event handler.

---

(update: 2015-04-27) The method described above is deprecated by now as @10basetom points out. The better way is to use Event() . Please note that this won't work in IE and Safari.