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?
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.
{
"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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With