在Google Chrome扩展程序页面上触发"onchange"事件

我正在开发一个扩展,使用来自其他网站的数据自动填充表单.我有一个具有不同选项的上下文菜单,每个选项都有不同的数据,但完成相同的表单.数据是动态的,取决于其他网站.使用"chrome.tabs.executeScript"我可以插入一些数据,但我无法触发事件"onchange"的字段.可以更改选择的值,但网站有一个事件"onchange",当我更改值时不会触发,而不是通过"chrome.tabs.executeScript"运行"onchange".它显示的错误是:"未捕获的TypeError:对象#的属性'onchange'不是函数#HTMLSelectElement"

编辑:

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);

执行此行时,显示"未捕获的TypeError:对象#的属性'onchange'不是函数#HTMLSelectElement":

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

但是,如果我直接在控制台中运行此行,通常运行没有错误

document.getElementsByName("country")[0]是url的元素,"select"是我在扩展中创建的元素,用于选择应加载的客户端数据.

url_where_the_code_must_run:

Max K.. 8

您是否尝试过发布事件而不是直接调用该函数？据我记忆,直接调用事件处理程序可能会产生副作用.我现在找不到消息来源.

尝试更换

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

同

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

我也创造了一个小小提琴:http://jsfiddle.net/d94Xb/1/

此外,你可能会考虑addEventListener(),并dispatchEvent()多一点,因为这是注册并执行事件处理的常用方法.

(更新:2015-04-27)现在,@ 10basetom指出,上述方法已被弃用.更好的方法是使用Event().请注意,这在IE和Safari中无效.