How to preserve userscript modifications in Chrome after an asynchronous content update on an .aspx webpage – Asp.net

I’m trying to automate the workflow of a webpage for my company’s inventory system. The page is generated by the server-side logic of an ASP.Net page, which I don’t have access to. The page has several fields on it to allow you to enter a new container barcode, the item that should go in the container, etc. Each of these fields has an onchange event listener hooked up to it which calls the page’s __doPostBack() function to verify the entered data. If the data is verified, the page code is re-served with the data entered so far, and focus is set to the next field on the form.

I want to automate this page with a userscript in Chrome. I started by using ViolentMonkey to inject a custom script, but I could only get the script to trigger on the initial load, not after each data entry. After this, I tried using Chrome Local Overrides to change __doPostBack() to try to capture the data I need to automate the page. That also only works once; after a field is filled and loses focus and new HTML is served, it overwrites Chrome’s local copy.

I think that my problems are being caused by an asynchronous refresh of the entire page contents, which wipes out the injected userscript and Chrome’s Local Override without triggering the normal page refresh listeners in Chrome Overrides or ViolentMonkey to re-inject the modified code. Does anyone have any thoughts on how I could modify the JavaScript in such a way that it would persist after the page content is replaced with new HTML?

P.S. I don’t think the code itself is relevant to this particular problem, but if anyone thinks it would be helpful to share a limited section of the client-side code, let me know.

Edit 1: Here’s a more in-depth view of what I’m trying to accomplish, and the progress I’ve made so far. For reference, the form looks like this:

My Original Plan

1. The user loads the page. ViolentMonkey injects a userscript which issues a series of prompts, collecting data on the range of new barcodes that the user would like entered into the system. (Specifically, the barcode prefix, the starting barcode number, and the ending barcode number.) This values are stored in localStorage.

2. After this data has been collected and validated by the user, the page loads normally. For reference, the form looks something like this:

3. The user fills out the fields as normal. After each field is filled out (with the exception of the Container Description field), the page pushes focus to the next field. (For example: <script language="javascript"> try { document.getElementById('txtContDesc').focus() } catch (e) { } </script>. The id of the field to focus is dynamically changed via the server logic.)

4. I need to collect the User Badge, Container Type, and Destination Barcode values so that I can refill them later when I automate the form. My original plan was to add a onfocus event listener to the Container Description field, since focus will be shifted to it once the Destination Barcode field has been verified. I will know at this point that the user has successfully entered a valid entry for each of the fields above the Container Description field, and I would then be able to collect these values and store them in localStorage.

5. Once I have all the data needed for the form, I would pilot the form using the userscript in ViolentMonkey and the data stored in localStorage, to persist data across page refreshes.

Other Alternatives:

The eventListener idea on an element doesn’t work, because ASP.NET updates the page with fresh code every time a field is verified, wiping out the listener. It also doesn’t trigger a refresh, so ViolentMonkey doesn’t rerun my userscript.

My other thought was to modify doPostBack(). The doPostBack() function looks like this (as far as I can tell):

<script type="text/javascript">
   var theForm = document.forms['formNewContainer'];
      if (!theForm) {
         theForm = document.formNewContainer;
      }
      function __doPostBack(eventTarget, eventArgument) {
          console.log("Form submitted");
      }
</script>

It is called on verified fields with the following onchange handler:

onchange="javascript:setTimeout('__doPostBack('ctl00$newContPage$txtBarcode','')', 0)"

My goal would be to modify doPostBack() to save the information I need to localStorage before executing the rest of doPostBack() without changing it.

(Note: doPostBack() here looks incredibly simplistic, so I think I’m missing some information about how ASP.NET works here. This is outside of the question though, unless it’s relevant for what I’m trying to do.)

I was able to successfully modify doPostBack() in this way using Chrome Local Overrides to serve myself a local copy of the page on page load, instead of the server version. But this only works for the first doPostBack() request. After the first request, the server serves me new code. Like with ViolentMonkey, the lack of a refresh trigger prevents Chrome Local Overrides from re-serving my local copy, and I’m served code without the doPostBack() modification.

So that’s where I’m at. I’ll try adding a global listener like @wOxxOm suggested, and see where that gets me.