CODEWITHSUNDEEP
javascriptgoogle-chrome-extensioncontent-script
Hery
Hery

Reputation: 7639

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

Upvotes: 16

Views: 8367

Answers (4)

S&#233;bastien Renauld
S&#233;bastien Renauld

Reputation: 19672

JavaScript script tags are not blocking the execution (thankfully!). If you'd like to get the kind of functionality you want (lazy-loading), you'll need to do something like the following:

function loadScript(scriptName, callback) {
   var sTag = document.createElement("script");
   sTag.src = scriptName;
   sTag.onreadystatechange = sTag.onload = function() {
    var state = s.readyState;

    if (!state || /loaded|complete/.test(state)) {
        callback();
    }
  };
 }

This will fire a callback function when the script tag is loaded. From there, load everything and make sure that every callback is processed, then fire your page-load events in the sanity of mind that you have every library you need.

Upvotes: 1

Robert Hoffmann
Robert Hoffmann

Reputation: 2416

There are entire libraries dedicated to achieving what you are trying to do, as each browser seems to add its own share of bugs. Have a look at something like HeadJS, or if already using jQuery what joe said.

Upvotes: 0

Brock Adams
Brock Adams

Reputation: 93613

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.

Upvotes: 16

Joe Enos
Joe Enos

Reputation: 40421

When you inject javascript onto the page like that, it comes in asynchronously. When you actually have the <script> tag in there from the beginning, it will be synchronous and run in the correct order.

Kind of a hassle, but since it's asynchronous, your code will continue to execute while the other script file is being loaded.

In order to know when the script is complete, you have to handle the event for the script - easiest way is using jQuery's getScript function, which provides you a callback argument.

Upvotes: 0

Related Questions