Making a form filler for personal use

Add-ons Development
#1

Totally new to Javascript. I am trying to make an extension for myself to help me fill in lots of tax data into the H&R Block website. I can’t seem to get it to work.

I would like to be able to press a button while I’m on a certain page and have it fill the data, submit, and repeat for several rows of a csv file.

My manifest.json looks like this:

{

  "manifest_version": 2,
  "name": "Tax data form filler",
  "version": "1.0",

  "description": "Fills forms on H&R Block site",

  "icons": {
    "48": "icons/border-48.png"
  },
    
  "browser_action": {
    "default_icon": "icons/ftd.png",
    "default_title": "Fill form"
  },

  "content_scripts": [
    {
      "matches": ["*://taxes.hrblock.com/*"],
      "js": ["ftd.js"]
    }
  ]

}

ftd.js looks like this:

document.getElementById("XFormatTextBoxDATEACQ_INPUT").value = "07/13/2018";


document.getElementById("XFormatTextBoxDATEACQ_INPUT").focus();
document.getElementById("XFormatTextBoxDATEACQ_INPUT").select();

document.getElementById("btnNext").click();

The relevant parts of the page I would like to operate on are these:

<a id="btnNext" class="nextButton" title="Next" tabindex="0" href="javascript:PageActions.Next();" style="display: block;">Next<span class="rightArrow"></span></a>


<input class="formField fDate" id="XFormatTextBoxDATEACQ_INPUT" tabindex="0" name="_id103" maxlength="10" type="text" placeholder="MM/DD/YYYY" aria-describedby="MM/DD/YYYY" autocapitalize="none" autocorrect="off" data-original-title="" title="">

As you can see, I’m still some way to my goal. Still, I can’t even have the extension fill a text box.

When I was testing with the Firefox console, I was able to fill in the box, but when I used the final command to click the button to submit, the page said that the the box must be filled in, and thus would not submit. It didn’t seem to recognize that the box had been filled. I then tried to place the cursor in the text box, hence the use of focus() and select(), but this didn’t work, either.

I’d be glad for any help!

#2

Some websites use Javascript that detects when changes to the value of a text field have been made in order to “enable” form submission.

You can notify the website that you have changed the value using code like this:

const domElement = document.getElementById("XFormatTextBoxDATEACQ_INPUT");
domElement.value = "07/13/2018";
domElement.dispatchEvent(new UIEvent("input", {view: window, bubbles: true, cancelable: true}));
domElement.dispatchEvent(new UIEvent("change", {view: window, bubbles: true, cancelable: true}));

The focus() and select() is unlikely to help so you should be able to skip those steps.