My injected <script> runs after the target-page's javascript, despite using run_at: document_start?
I am having some problem with the order of javascript execution when I use the content script to inject some javascript into the HTML page:
This is my HTML page I use to test, test.html:
<html><head>
<title>Test Page</title></head>
<body>
<script>
console.log("In page");
</script>
</body>
</html>
This is the javascript I use to inject additional code into HTML page, injector.js:
var s = document.createElement("script");
s.src = chrome.extension.getURL("inject.js");
document.documentElement.appendChild(s);
console.log("Inject finished");
And this is the content of injected script, inject.js:
console.log("Inside inject.js");
And finally, this is my manifest.json:
"web_accessible_resources": [
"inject.js"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["/injector.js"],
"run_at": "document_start"
}
]
Now, when I open up the test.html, this is what I got in my console:
Inject finished
In page
Inside inject.js
My question is, why is In page printed out before Inside inject.js? Isn't inject.js supposed to be run first since I set the run_at to document_start?
If this is by design, is there any way I can make sure that the content inside inject.js is executed before the script inside the HTML page while not changing anything inside the HTML page?
Setting the async attribute to false before appendChild doesn't seem to work since it is used for the ordering between the external scripts, not between external scripts and in-page script.
BTW, I am testing this on Chrome 27.0.1453.9
Answer
Injected scripts, with src attributes are executed asynchronously in Chrome.
Consider this HTML file:
<html><head>
<title>Chrome early script inject, Test Page</title>
<script>
var s = document.createElement ("script");
s.src = "localInject1.js";
document.documentElement.appendChild (s);
</script>
</head>
<body>
<p>See the console.</p>
<script src="localInject2.js"></script>
<script> console.log("In page: ", new Date().getTime()); </script>
</body>
</html>
where localInject1.js is just:
console.log("In page's script 1: ", new Date().getTime());
and localInject2.js is:
console.log("In page's script 2: ", new Date().getTime());
Nominally, the console should show:
In page's script 1: ...
In page's script 2: ...
In page: ...
But frequently, and especially on cache-less reloads, you'll see:
In page's script 2: ...
In page: ...
In page's script 1: ...
Setting s.async = false; makes no difference.
I'm not sure if this is a bug or not. Firefox also gets the scripts out of order, but seems more consistent about it. There don't seem to be any relevant Chrome bugs, and the specs are unclear to me.
Work around:
Scripts with code set by textContent, rather than a file linked by src, execute immediately as you would expect.
For example, if you changed injector.js to:
var s = document.createElement ("script");
s.src = chrome.extension.getURL ("inject.js");
document.documentElement.appendChild (s);
var s = document.createElement ('script');
s.textContent = 'console.log ("Text runs correctly!", new Date().getTime() );';
document.documentElement.appendChild (s);
console.log("Inject finished", new Date().getTime() );
you would see:
Text runs correctly! ...
Inject finished ...
In page
Inside inject.js
Admittedly this can be a pain in a content script, but it may be all you can do (in Chrome) until this issue is resolved by the W3C and browser vendors.