Другой сценарий входа в greasemonkey

Question

Для моего первого посещения написания сценария greasemonkey я решил попробовать создать сценарий автологин.

Страница, в которую я пытаюсь войти, построена как;

<input class="form-control" type="text" data-reactid=".0.0.1:$0.1.1:$input" placeholder="Username"></input> 
</div> 
<div class="form-group" data-reactid=".0.0.1:$0.2"> 
<input class="form-control" type="password" data-reactid=".0.0.1:$0.2.1:$input" placeholder="Password"></input> 
</div> 
<button class="btn-block btn btn-lg" data-reactid=".0.0.1:$0.3" type="button" disabled=""> 

Эта кнопка активируется при заполнении значений имени пользователя и пароля. Пока что мой сценарий выглядит так:

var name = "foo"; 
var pass = "bar"; 
document.getElementByTagName ([placeholder="Username"]).value = name; 
document.getElementByTagName ([placeholder="Password"]).value = pass; 
var evt = document.createEvent ("HTMLEvents"); 
evt.initEvent ("click", true, true); 
document.getElementByClassName('btn-block btn btn-lg btn-primary').dispatchEvent (evt); 

... но это, похоже, фактически не вставляет данные в поля имени пользователя и пароля. Я добавил некоторые бдительные заявления в основном пошагово, и это выглядит, как он умирает, когда я первый использовать document.getElementByTagName

Answer 1

Вы, вероятно, хотели использовать getElementsByTagName и getElementsByClassName - обратите внимание, что «Элементы» во множественном числе в тех именах функций.

Это, как говорится, я не считаю, что селектор атрибутов работает с getElementsByTagName. Вы можете написать свою собственную функцию, которая достигает аналогичной цели (например, в this answer), но вам, вероятно, лучше использовать document.querySelector.

var name = "foo"; 
var pass = "bar"; 
document.querySelector('[placeholder="Username"]').value = name; 
document.querySelector('[placeholder="Password"]').value = pass; 
var evt = document.createEvent("HTMLEvents"); 
evt.initEvent("click", true, true); 
document.querySelector('.btn-block, .btn, .btn-lg, .btn-primary').dispatchEvent(evt); 

Обратите внимание, что document.querySelector возвращает первый результат, соответствующий запрос - убедитесь, что есть только одна вещь, которая соответствует его.