"run-at": "document-start" throws an error: document.head is null

[IAmVan1sh]

I am trying to store a consolo.log function before the page loads, cuz after that it will be overwriten by page's source code. But when I set userscript comment "run-at" to "document-start", I see this error on server/page restart:

which points to this part of "auto generated" code:

I didn't find in docs any option that would let me to generate my own server body, so I can add window even listener and this part runs only on page load. Although, as I see this function actually injecting my script, so if it runs on page load, the console.log will be already overriten. Build code is fine, but this part is a problem to debug in dev mode. Thanks for answer!

[lisonge]

what is your target host url ?

[IAmVan1sh]

oib.io game

[lisonge]

how to reproduce it ?

I use can not reproduce it by chrome + tampermonkey

[lisonge]

https://github.com/lisonge/vite-plugin-monkey/releases/tag/v7.1.5

[IAmVan1sh]

Nice, that's a good solution. And I was using firefox + tampermonkey, not sure if there any difference. But the problem stays, and I couldn't find its solution. it sounds like this:
When you use "run-at": "document-start" in dev mode, the only thing that is executed right after document object created is "tampermonkey userscript", which is our hot reload server code. But the assigning to "script.src" in both cases triggers browser to schedule a network fetch for that source, and even though the line itself completes instantly, this process is still asynchronous. Thus it doesn't block page source scripts to run before the userscript is loaded and executed, so in dev mode, we can't really run our userscript right before all other scripts on page.

Now a bit about my solution. as page source clears console.log function, and in dev it can't trully run before the page source scripts, we can use "iframe" to get the clean console.log instance. Here is a brute example generated by ChatGPT, but it works:

`
// Safe: create iframe, append it, then use its console
function getCleanConsoleFromIframe(timeout = 2000) {
return new Promise((resolve, reject) => {
// Wait until document.documentElement exists
const waitDocEl = () => {
if (document.documentElement) return Promise.resolve();
return new Promise((r) => {
const to = setInterval(() => {
if (document.documentElement) {
clearInterval(to);
r();
}
}, 8);
});
};

	waitDocEl().then(() => {
		const iframe = document.createElement("iframe");
		iframe.style.display = "none";
		// append to documentElement (safe at document-start)
		document.documentElement.appendChild(iframe);

		// contentWindow might not be available immediately; wait a few ticks
		const start = Date.now();
		(function waitCW() {
			try {
				const cw = iframe.contentWindow;
				if (cw && cw.console) {
					// bind the clean console.log
					const cleanLog = cw.console.log.bind(cw.console);
					resolve({ iframe, cleanLog, cleanConsole: cw.console });
				} else if (Date.now() - start > timeout) {
					reject(
						new Error("Timed out waiting for iframe.contentWindow.console")
					);
				} else {
					// check again next microtask
					setTimeout(waitCW, 8);
				}
			} catch (err) {
				// Access may throw in some very locked-down cases; retry a bit
				if (Date.now() - start > timeout) reject(err);
				else setTimeout(waitCW, 8);
			}
		})();
	});
});

}

// usage
getCleanConsoleFromIframe()
.then(({ cleanLog }) => {
cleanLog("Hello from the clean console!");
})
.catch((err) => {
console.error("Failed to get iframe console:", err);
});
`

[IAmVan1sh]

Damn, I am not good in github markups, so for some reason my attached code markdown broke, but you still can copy this to check (btw, no need to use "run-at": "document-start" at this case anymore). Thanks for help!