Javascript 使用Angular和Chrome扩展内容脚本在网站上触发输入更改

我正在创建一个内容脚本，它将填充 使用预定义的数据

但是我对第一步，页面上的第一个字段，注册号有问题

我在脚本中使用jQuery，可以将输入的值设置为我想要使用的值

 $('input#regnumber').val(data['car_reg'])

但当我模拟点击“查找汽车”按钮时，网站上的字段似乎为空，因为“请输入注册号”警告出现，而不是显示汽车信息

我查看了代码，发现该网站使用angular，所以我猜这与它的绑定有关

我尝试在

$（'input#regnumber'）

上触发change、keyup、input事件，但它没有改变任何东西

编辑： 也试过了

$('input#regnumber').val(data['car_reg']).dispatchEvent(new Event("input", { bubbles: true }));

---

如果没有成功

您将得到验证错误，因为可能数据['car\u reg'的值未定义。如果数据是一个对象数组，则使用like data[0]。car_reg。使用控制台验证该值。

您将收到验证错误，因为可能数据['car\u reg']的值未定义。如果数据是一个对象数组，则使用like data[0]。car_reg。使用控制台验证值。

AngularJS输入使用

ng model

指令将输入与模型连接：

<input id="regnumber" type="text" ng-model="formData.item" />

有关详细信息，请参阅

---

AngularJS输入使用

ng model

指令将输入与模型连接：

<input id="regnumber" type="text" ng-model="formData.item" />

有关详细信息，请参阅

---

我终于找到了一条路。。这是我在加载此页面的选项卡的背景脚本中所做的操作：

setTimeout(function() {
    chrome.tabs.executeScript(tab.id, { 'file': '/jquery-2.2.4.min.js', 'runAt': 'document_start' })
    chrome.tabs.executeScript(tab.id, { 'file': '/angular.min.js' })
    setTimeout(function() {
        chrome.tabs.executeScript(tab.id, { 'code': 'angular.reloadWithDebugInfo();' });
        setTimeout(function() {
            chrome.tabs.executeScript(tab.id, { 'file': '/jquery-2.2.4.min.js' });
            chrome.tabs.executeScript(tab.id, { 'file': '/formfiller.js' })
        }, 5000);
    }, 5000);
}, 8000)

在我的

formfiller.js

中，我这样做是为了填充该字段：

 var scrpt = document.createElement('script');

    scrpt.innerText = "var scp = angular.element($('#regnumber')).scope();scp.regnumber = '12345';scp.$apply(); $('.car-registration__button').click();"

    document.head.appendChild(scrpt);

    scrpt.onload = function() {
        scrpt.parentNode.removeChild(scrpt);
    };

---

我终于找到了一条路。。这是我在加载此页面的选项卡的背景脚本中所做的操作：

setTimeout(function() {
    chrome.tabs.executeScript(tab.id, { 'file': '/jquery-2.2.4.min.js', 'runAt': 'document_start' })
    chrome.tabs.executeScript(tab.id, { 'file': '/angular.min.js' })
    setTimeout(function() {
        chrome.tabs.executeScript(tab.id, { 'code': 'angular.reloadWithDebugInfo();' });
        setTimeout(function() {
            chrome.tabs.executeScript(tab.id, { 'file': '/jquery-2.2.4.min.js' });
            chrome.tabs.executeScript(tab.id, { 'file': '/formfiller.js' })
        }, 5000);
    }, 5000);
}, 8000)

在我的

formfiller.js

中，我这样做是为了填充该字段：

 var scrpt = document.createElement('script');

    scrpt.innerText = "var scp = angular.element($('#regnumber')).scope();scp.regnumber = '12345';scp.$apply(); $('.car-registration__button').click();"

    document.head.appendChild(scrpt);

    scrpt.onload = function() {
        scrpt.parentNode.removeChild(scrpt);
    };

---

不，regnumber字段的值成功设置为数据['car_reg']，只是angular没有注册它。您可以尝试使用任何字符串代替数据['car_reg']不，regnumber字段的值成功设置为数据['car_reg']，只是angular没有注册它。您可以尝试使用任何字符串而不是数据['car_reg']我得到此错误：ReferenceError:angular未定义我得到此错误：ReferenceError:angular未定义