How to create persistent toolbar?

Question

This is for a greasemonkey userscript within Firefox (Waterfox).

We have a cloud database (CRM Dynamics) which, in order to load a particular record, the browser performs three page loads with different urls and parameters.

I want to fetch parameters from one of those page loads (the one that loads in the middle) and display it on the page somewhere for reference. So I created a div that fits right below the main ribbon.

The problem is that, since the page loads three times, that means the script loads three times, so I use GM_getValue and GM_setValue to store and retrieve data on the subsequent pageloads.

However, it's worse than that.

• DOM items in the page can only be added/modified on the first load - this load loads all the html.
• The value I need is in the query params on the second load - which just fills in data to the first page.
• There is no way to get the query param value onto the toolbar-div on the second or third page loads; and I don't have the value until the second load. I think that the two latter page loads are only for passing parameters between the page loads - there is no page DOM in those loads.
• The userscript fires on each pageload.
• On the third pageload I can perform actions, but cannot interact with the html (there isn't any in this pageload) even though the html is in the window.

Is there a way to put my toolbar-div in the browser's DOM instead of the page's DOM? That way there could be a place where each page load has access to.

What I want to do is somehow get the first page load to do something after the third page load has finished.

Answer 1

Figured it out! Brock Adam's comment let me to a solution. Thanks, Brock.

So I figure the code to run on the first page load and make sure it does this:

$(window).on('load', function () {
    console.log('updating itemid');
    $('#myd').text(GM_getValue("itemid"));
});

The window.load event fires on each page load, so when the last pageload runs, it triggers this loading event and updates the div text. Apparently, this event doesn't fire until after the third pageload is complete.