My injected [removed] runs after the target-page's javascript, despite using run_at: document_start?

后端未结

关注

 4  1942

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 us

相关标签:

4条回答

难免孤独

2021-01-01 20:09

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.

0 讨论(0)

轮回少年

2021-01-01 20:10

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
春和景丽

2021-01-01 20:17

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
情歌与酒

2021-01-01 20:28
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...