Auslöser Eingabe ändern auf der Website mit Angular mit Chrome Extension Inhalt Skript

Question

Ich erstelle ein Content-Skript, die https://www.moneysupermarket.com/shop/car-insurance/questionset/#?step=highimpactquestions mit vordefinierten Daten bevölkern wird.

Aber ich habe ein Problem mit dem ersten Schritt, das erste Feld auf der Seite, Registrierungsnummer.

Ich bin mit jQuery in meinem Skript, und ich kann die Eingabe der Wert festgelegt, was ich will mit

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

Aber wenn ich auf Schaltfläche find Auto simulieren scheint es, wie für die Website dieses Feld leer ist, Die Meldung "Bitte geben Sie eine Registrierungsnummer ein" wird angezeigt, anstatt die Fahrzeuginformationen anzuzeigen.

Ich schaute durch den Code und sah, dass die Website eckigen verwendet, also denke ich, es hat etwas mit seiner Bindung zu tun.

Ich versuchte Auslösung Änderung, Tasteneingabe, Eingabe von Ereignissen auf der $('input#regnumber'), aber es ändert nichts.

EDIT: Auch versucht mit

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

ohne Erfolg

Answer 1

Sie erhalten Validierungsfehler, weil möglicherweise der Wert der Daten [ 'car_reg'] nicht definiert ist. Wenn es sich bei den Daten um ein Array von Objekten handelt, verwenden Sie die Daten [0] .car_reg. Verwenden Sie die Konsole, um den Wert zu überprüfen.

Answer 2

AngularJS Eingänge verwenden, um eine ng-model Richtlinie einen Eingang mit dem Modell zu verbinden:

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

Um das Modell von außerhalb des Rahmens verwenden gesetzt:

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

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

Weitere Informationen finden Sie

• AngularJS angular.element API Reference
• AngularJS scope API Reference ($apply)
• AngularJS Developer Guide - Scope (Integration with the Browser Event Loop)

Answer 3

fand ich eine Möglichkeit, endlich .. das ist, was ich in meinem Hintergrund Skript tat für die Registerkarte, wo diese Seite geladen wird:

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) 

Und in meinem formfiller.js mache ich das, um dieses Feld zu füllen:

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