Greasy Fork

Detecting events from an event-listener not created by my script, on a page .

I've written a few scripts that work on the pages of the " service-now " call tracking system we use.

https://greasyfork.org/en/scripts/4566/
https://greasyfork.org/en/scripts/6264/

These scripts are inserted in a service-now page, that already uses a number of scripts to load and display all sorts of content at runtime.

I use time-outs, and sometimes run a script a few times, in the hope that the fields or tables are already present and populated.

I know that in case of an HTML element, I can test if it is already present on a page, or if it is altered, but the problem is a bit more complex than that.

For example, I need to see that a table has "changed" in the sense that it is now displaying the next page of data. So, the same amount of TR's an TD's, just the content has been altered by a script.

I can see in the debugs that a lot of "service-now events" fire. There is even one that fires when the table is filled again! However I don't know how to access these events.

Can my inserted javascript receive events from the event-listeners in the unsafeWindow, not created by me?
Is there a special way to subscribe to these events?

Or else can it read them from the console.log output?

All I see, when I run the scripts that should show all the event listeners created, are the event-listeners I added myself, not the ones from the service-now application.

I have no contact/relation with service-now, and I keep it to myself that me and my colleagues use a greasemonkey/tampermonkey script to obtain a more userfriendly version of the service-now product.
There is little documentation that explains how this part of service-now works, so I'm basically reverse-engineering the pages.

Any help or idea's appreciated

Michel

Maybe MutationObserver could help?

Thanks wOxxOm, I will have a look.
Until now, no change events fire on the tables when they are updated, at least not in a way that I can detect them.

I kind of see the same behaviour as with the dom change event detection.
When I do it from my GM script it detects the change. When another script, native on the page makes the change no change is detected.

I guess the event detection is shielded from the page just like my GM script is.

I will be experimenting to see how I can bypass this somehow.
I don't care if the page would detect me using the script.

Have you tried MutationObserver with characterData:true and/or attributes:true?

Sorry wOxxOm,

That was a bit of a silly post I made.

I added this:

var observer = new MutationObserver( function(mutations) { console.log('##MutObSrvr forEach started'); mutations.forEach(function(mutation) { console.log('##MutObSrvr ' + mutation.type + ' attr ' + mutation.attributeName + ' trgt ' + mutation.target); });
}); var obstarget = unsafeWindow.document.querySelector('#task_table'); var obsconfig = { attributes: true, childList: true, characterData: true };

When I load the page it show me these log entries.

"##MutObSrvr forEach started" "##MutObSrvr attributes attr tabindex trgt [object HTMLTableElement]" "##MutObSrvr attributes attr style trgt [object HTMLTableElement]"

When I click a button to display the next 50 records, the table updates, but no mutation records appear.

It is for this update that I like to detect when it is finished updating the table.

task_table is really the table id:

< table cellspacing="0" cellpadding="0" style="width: 100%;">

<tbody>
    <tr>
        <td class="list_div_cell">
            <div id="task" class="list_div " type="list_div">
                <script></script>
                <a name="task_hash"></a>
                <table id="task_table" class="wideDataList list_table " last_row="5" glide_list_query="active=true^assigned_toISEMPTY^assignment_group=javascript:g…r_group=javascript:getMyGroups()^ORDERBYDESCassignment_group" grand_total_rows="5" total_rows="5" query="active=true^assigned_toISEMPTY^assignment_group=javascript:getMyGroups()^EQ^" can_hide_nav="false" glide_table="task" list_name="task" glide_list_can_create="true" maintain_order="false" glide_list_edit_insert_row="false" glide_list_edit_type="" glide_list_can_delete="false" first_row="1" rows_per_page="50" glide_list_omit_links="false" glide_list_edit_ref_qual_tag="" glide_list_edit_id="task" sort_dir="DESC" style="width: 100%; outline: medium none;" glide_list_has_header="true" glide_list_has_hierarchy="false" sort="task.assignment_group" tabindex="0"></table>
            </div>
        </td>
    </tr>
</tbody>

maybe adding subtree: true to obsconfig will help.

That changes a lot!! Thanks!!
Need to see what actually happens now.

There are many more events when the page loads.
But no new events when I go to the next group of records.

and what happens in the observer if you use document instead of unsafeWindow.document?

If doesn't seem to make any difference.


"##MutObSrvr attributes attr title trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr style trgt [object HTMLTableRowElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr title trgt [object HTMLTableRowElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr style trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr title trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr style trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr title trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr style trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr title trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr style trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr title trgt [object HTMLTableCellElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr style trgt [object HTMLTableRowElement]" ITSM_main_page.user.js:16
"##MutObSrvr attributes attr title trgt [object HTMLTableRowElement]"



The first time I load the page and table I see the above events in the log.
The events are my changes, I change the color and title of a number of cells.

So the behaviour is consistent with the dom change detection I tried.

What I find puzzling is that also these events do not reappear when I move to the next 50 records in the table.

Like as if I would have disabled the observer

Maybe that table is getting deleted? Try observing on a parent container such as #task or, if necessary, document.body. Then can you see the changes?

That was a good idea indeed Jefferson.
I suppress the tablerow and tablecell events and now see a consistent set of events when the table updates.

I guess I can use one of these to trigger the coloring of the table rows.


"##=# cnav click " ITSM_main_page.user.js:171
"##=# color cases " ITSM_main_page.user.js:218
"##MutObSrvr childList attr null trgt [object HTMLDivElement]" ITSM_main_page.user.js:18
"##MutObSrvr attributes attr src trgt [object HTMLImageElement]" ITSM_main_page.user.js:18
"##MutObSrvr attributes attr style trgt [object HTMLImageElement]" ITSM_main_page.user.js:18
"##MutObSrvr childList attr null trgt [object HTMLSpanElement]" ITSM_main_page.user.js:18
"##MutObSrvr attributes attr tabindex trgt [object HTMLTableElement]" ITSM_main_page.user.js:18
"##MutObSrvr attributes attr style trgt [object HTMLTableElement]" ITSM_main_page.user.js:18
"##=# color cases " ITSM_main_page.user.js:218



Still need to dig in a bit on the MutationObserver, mutationevent format.

Thanks everybody for your suggestions.

Michel

It now works the way I want it to.
Not sure yet if these mutation events are called when it starts to change the element or when it has finished, I just give it a few msec anyway.

But the event does only come after the other service-now scripts, have pulled in the data for the new page, (no matter how long this takes) and are probably rendering it, into the table.

Thanks again