How to get a Greasemonkey script to run both at @run-at document-start AND at @run-at document-end?

javascript greasemonkey startup
Azevedo picture Azevedo · Oct 9, 2014 · Viewed 12.2k times · Source

For my Greasemonkey script, there is part of the code that should run before the page is loaded (@run-at document-start) and another part of the code that should run after the document is loaded (@run-at document-end).
Is this possible?

  • 1st part of script run
  • page is loaded, document is ready
  • 2nd part of script run

I'd rather not use jQuery for this.

I tried the onload event but it didn't work. I think the event cannot be attached if the document is not there yet?

window.document.onload = function(e){ 
    alert("document.onload" ); 
}

Answer

Brock Adams picture Brock Adams · Oct 9, 2014

The event you want is DOMContentLoaded. Also, that is not how to use the load event.

Here's a complete script that demonstrates the various firing times:

// ==UserScript==
// @name        _Show page start event timing
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @run-at      document-start
// ==/UserScript==
console.log ("==> Script start.", new Date() );

// 1ST PART OF SCRIPT RUN GOES HERE.
console.log ("==> 1st part of script run.", new Date() );

document.addEventListener ("DOMContentLoaded", DOM_ContentReady);
window.addEventListener ("load", pageFullyLoaded);

function DOM_ContentReady () {
    // 2ND PART OF SCRIPT RUN GOES HERE.
    // This is the equivalent of @run-at document-end
    console.log ("==> 2nd part of script run.", new Date() );
}

function pageFullyLoaded () {
    console.log ("==> Page is fully loaded, including images.", new Date() );
}

console.log ("==> Script end.", new Date() );

Typical results:

"==> Script start."                           2014-10-09T01:53:49.323Z
"==> 1st part of script run."                 2014-10-09T01:53:49.323Z
"==> Script end."                             2014-10-09T01:53:49.323Z
"==> 2nd part of script run."                 2014-10-09T01:53:49.385Z
"==> Page is fully loaded, including images." 2014-10-09T01:53:49.487Z

Related questions

window.close and self.close do not close the window in Chrome

The issue is that when I invoke window.close() or self.close() it doesn't close the window. Now there seems to be a belief that in Chrome you can't close by script any window that is not script created. That …

Read More
Get image data url in JavaScript?

I have a regular HTML page with some images (just regular <img /> HTML tags). I'd like to get their content, base64 encoded preferably, without the need to redownload the image (ie. it's already loaded by the browser, so …

Read More
alert a variable value

How do I display the value of a variable in javascript in an alert box? For example I've got a variable x=100 and alert(x) isn't working. the script used in grease monkey is here var inputs = document.getElementsByTagName('input'); …

Read More