How do I set the value of a Text Field through TamperMonkey?

Question

I'm new to javascript and tampermonkey, try to remember that in your explanations please.

This is the site I'm trying to work with

As you can see it's pretty simple. However there's no way to make the site remember your password, and right now all I'm trying to do is make a script that will fill in the username and password fields with, you guessed it, my username and password.

Working off of a few tutorials I found online (it doesnt seem like there's a lot of tutorials for writing scripts in TamperMonkey), I managed to come up with the following code

// ==UserScript==
// @name       Powerschool Memory
// @namespace  http://use.i.E.your.homepage/ 
// @version    0.1
// @description  Makes PowerSchool remember your username and password.
// @match      https://powerschool.avon.k12.ct.us/gaurdian/home.html
// @require http://code.jquery.com/jquery-latest.js
// @copyright  2013+, You
// ==/UserScript==

jQuery(function($) {
    document.getElementById($('input[type=password]').attr('id')).textContent = 'password_here';
    document.getElementById('fieldAccount').innerHTML = 'username_here';
});

As you can see I've tried two ways of setting the content of the field for the username(setting the element's innerHTML) and password(setting the textContent), however neither seem to work.

I'm fairly sure the script is running, as whenever I'm about to navigate to the website I go to the dash and restart the script.

The username field's ID, I should mention, was obtained by right clicking on the text box, inspecting the element, and copying and pasting the next following id variable

Could you guys help me see where my error is and, perhaps more importantly, what I'm doing to mess it up?

Answer 1

For tutorials and questions, you can search for Greasemonkey topics. With only a few exceptions, if it works for Greasemonkey, it works for Tampermonkey by design.

As for the the question code, there are numerous issues:

1. That is not how you set values for text and password <input> elements. In jQuery, you set them with the .val() function. EG: $("#fieldAccount").val("foo");
2. Requiring jQuery without a @grant directive. This will bust the script, or bust the page or bust both.
3. The @match directive does not match the page. gaurdian is incorrect, the page uses guardian.
   You can tell when your @match directives are correct by looking at the Tampermonkey icon in the upper-right. If any scripts are active on that page, it will show a red icon with the number of active scripts.
4. The @match directive does not match the page. The match specifies https, but that site does not support SSL (!!!). You need to match the unsecure page, as that's the only one offered, and then yell at the site owners to stop broadcasting your sensitive information.
5. Improper use of getElementById. $('input[type=password]').attr('id') is undefined for this target page.

6. Storing username and password in a script file! This is one the the oldest mistakes, and exploits, in the book. If you do this, it is just a matter of time before you get pwned.

   After you get the rough idea working, Incorporate a "sensitive information" framework like this one into the script.

7. Unnecessary use of jQuery(function($) {. It's normally not needed in a Greasemonkey or Tampermonkey script, and just mildly obfuscates the code in this case.
8. Using getElementById when you have jQuery.
   document.getElementById("foo") is the same as $("#foo"), but the latter is easier to type, read, and maintain. True, getElementById might be infinitesimally faster, but by such a small amount that it will never be a factor for anything practical that you are trying to do.
   jQuery approaches also are much more portable and reusable.

Putting it all together, this complete script will work:

// ==UserScript==
// @name        Powerschool Memory
// @version     0.1
// @description Makes PowerSchool remember your username and password.
// @match       http://powerschool.avon.k12.ct.us/guardian/home.html
// @match       https://powerschool.avon.k12.ct.us/guardian/home.html
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
//-- If/when SSL becomes available, switch to only using the https pages.

$("#fieldAccount").val ("username_here");
$("#login-inputs input[name='pw']").val ("password_here");

BUT, use the framework linked in issue 6, above, instead.