使用Angular和Chrome Extension內容腳本在網站上觸發輸入更改

Question

我正在創建一個內容腳本，它將使用預定義數據填充https://www.moneysupermarket.com/shop/car-insurance/questionset/#?step=highimpactquestions 。

但是我對第一步，頁面上的第一個字段，注冊號有疑問。

我在腳本中使用了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 }));

沒有成功

Answer 1

您收到驗證錯誤，因為也許data ['car_reg']的值未定義。 如果數據是對象數組，則使用類似data [0] .car_reg。 使用控制台驗證該值。

Answer 2

AngularJS輸入使用ng-model指令將輸入與模型連接：

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

要從框架外部設置模型，請使用：

var elem = $('input#regnumber');
var scope = angular.element(elem).scope();

scope.$apply(function() {
    scope.formData.item = value;
});

有關更多信息，請參見

• AngularJS angular.element API參考
• AngularJS范圍API參考（$ apply）
• AngularJS開發人員指南-范圍（與瀏覽器事件循環集成）

Answer 3

我終於找到了一種方法..這是我在后台腳本中為加載此頁面的選項卡所做的：

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