Chrome拡張コンテンツスクリプトでAngularを使用してウェブサイトの入力を変更する

Question

https://www.moneysupermarket.com/shop/car-insurance/questionset/#?step=highimpactquestions と定義済みのデータを含むコンテンツスクリプトを作成しています。

しかし、私は最初のステップ、ページの最初のフィールド、登録番号に問題があります。

、私は私のスクリプト内のjQueryを使用している、と私は私が

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

を使用して欲しいものへの入力の値を設定することができます。しかし、私は見つけるの車のボタンをクリックをシミュレートするとき、フィールドが空であることをウェブサイトのように思えます「登録番号を入力してください」という警告メッセージが表示されます。

私はコードを見て、そのウェブサイトが角度を使用しているのを見ました。それで、そのバインディングと関係があると思います。

私は$('input#regnumber')で変更、キーアップ、入力イベントをトリガしようとしましたが、何も変更されません。

EDIT：多分データの値[ 'car_reg']が定義されていないので、 はまた、成功

Answer 1

なし

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

で試してみましたあなたは、検証エラーを取得しています。データがオブジェクトの配列の場合、data [0] .car_regのように使用します。コンソールを使用して値を確認します。

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

は、フレームワークの使用、外部からモデルを設定する：

Answer 2

AngularJS入力がモデルに入力を接続するng-modelディレクティブを使用する詳細については、

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

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

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

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