Making a Google Chrome extension and need to run a script after the head is loaded, because there are scripts in the head and I need them to run. And before the DOM is loaded, because there's an inlined script in there that I need to beat.
How would I do this? How do I detect when head loads?
Just put it at the top of the <body> tag. Scripts execute where they are placed and will block the rest of the page, so a script at the top of the body will have awareness of everything in the head, but no awareness of the rest of the DOM, which is still loading. If you place it at the bottom of the <body> it will still be before DOMReady and before the page-load event, plus you should be able to access DOM elements that preceeded the script. One way this can be useful if you need to append scripts dynamically to the <head> -- you can't do that with a script that's inside the <head>, so you have to do it in the <body>.
[Edit] My answer can be applied generally to any HTML document, but Mohamed's answer applies more directly to Google extensions. I'd be inclined to take his answer ahead of mine, though both are probably correct.
When you inject your content script, within the manifest you can state the "run_at" parameter to be "document_start", the files are injected after any files from css, but before any other DOM is constructed or any other script is run. More information can be found here: http://code.google.com/chrome/extensions/content_scripts.html#registration
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"run_at": "document_start"
}
],
...
}
*Edited, added an example. One of the mutations event types could be used.
manifest.json
{
"name": "Content Script test",
"version": "0.1",
"description": "Content Script test",
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["cs.js"],
"run_at": "document_start",
"all_frames": true
}
]
}
document.addEventListener('DOMSubtreeModified', OnSubtreeModified, false);
function OnSubtreeModified(event) {
console.log('Hello from extension!');
document.removeEventListener('DOMSubtreeModified', OnSubtreeModified, false);
}
<html>
<head>
<script>
alert('Hello from Web!');
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
You will two alerts, in the order: