自動填充功能在Angularjs不起作用基於頁面

我有一個頁面，我想填寫登錄/密碼字段和autoclick「登錄」提交按鈕。我已經提到了here中的所有細節。自動填充功能在Angularjs不起作用基於頁面

頁面正在使用AngularJS。

由於沒有檢測到登錄/密碼字段，它不起作用。我已經嘗試了很多方法，包括Using page's angular JS in chrome extension

例如。我試過這個代碼（以及許多其他類似Trigger a keypress/keydown/keyup event in JS/jQuery?），但沒有一個能夠使網頁檢測自動填充登錄名和密碼：

$("#loginEmailMobile").val(user_selections.freecharge_details.login).trigger('input').keydown().keyup(); 
     $("input#clientpassword").val(user_selections.freecharge_details.password).trigger('input').keydown().keyup();

另一種粗暴的方式是封鎖的背景頁的AngularJs圖書館嘗試使其工作。但是這也行不通。

如何爲此頁面進行表單自動填充？

來源

2016-11-23 user5858

我們需要一個[MCVE]（http://stackoverflow.com/help/mcve）來回答你的問題 – maurycy

[mcve]需要的原因是*我們想要幫助*。如果我們不需要重新創建任何複製問題所需的代碼，它就更容易幫助。這是你已有的代碼。所以，請幫助我們幫助您，並提供一個* complete * [mcve]，用於解決與此類問題相關的問題。如果沒有[mcve]，甚至開始幫助你的努力量會大大增加，這將顯着減少願意/能夠幫助你的人數。即使我們付出了額外的努力，我們也不得不在你的問題的重要部分猜測。 – Makyen

你有沒有試過[this]（http://stackoverflow.com/questions/5712796/html-login-form-provide-username-autofill-password） – George

爲了讓角度記錄輸入內容已更改，您需要在設置字段內容後手動觸發input事件。

的代碼將大致翻譯成這樣：

document.getElementById('loginEmailMobile').value = '[email protected]' 
document.getElementById('loginEmailMobile').dispatchEvent(new Event('input')) 
document.getElementById('clientpassword').value = 'password' 
document.getElementById('clientpassword').dispatchEvent(new Event('input')) 
document.getElementById('signInButton').dispatchEvent(new Event('click'))

此代碼，當粘貼到瀏覽器的控制檯，觸發表單提交。我敢打賭，它也會與change事件一起工作。

由於您正在製作Chrome擴展程序，因此需要將此代碼注入頁面。您可以通過在manifest.json中指定"content_scripts"這樣的密鑰（請注意，您的網站的網址已存在，以便您的腳本inject.js包含觸發表單更改的邏輯，但不會在您訪問的所有網頁中注入）：

"content_scripts": [ 
    { 
     "matches": ["https://login.freecharge.in/*"], 
     "js": ["js/inject.js"] 
    } 
],

然後，在您的擴展程序的彈出式腳本中，例如，您將使用chrome.tabs API's executeScript method調用您注入的函數inject.js。

您也可以直接將上面的代碼注入executeScript並完全跳過腳本注入，但隨着代碼增長更長，您可能希望將某個地方的所有內容都放在適當的js文件中，然後使用此API調用函數。

來源

2016-11-28 23:15:15 beeb

不知道爲什麼從內容腳本完成相同的事情時將無法工作。 – user5858

我不知道你是否嘗試過使用jQuery的'trigger'函數，但我注意到在某些情況下，當使用React或Angular等框架時，使用'dispatchEvent'的本地事件效果更好。 – beeb

自動填充功能在Angularjs不起作用基於頁面

回答

相關問題