I am having troubles loading all the scripts that I am inserting into the page context with <script> tags from a content_script script, because they are required to be executed in the correct loading order, as some depend on others. In an actual HTML file I guess there is a queue to load the files, but with inserting <script> tags it seems like if one script delays a little time, the next one starts loading and then is immediately executed notwithstanding it had to wait for its dependency library that is still loading.
Below is the network output with the error caused because of x-tag-core.min.js is loaded before primeui-all.min.js and eventPage.js which uses jquery-ui.min.js, is loaded before it:
// manifest.js
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/jquery-3.1.1.min.js",
"js/main.js"
]
}
]
// main.js
var s = document.createElement('script');
s.src = chrome.extension.getURL('js/jquery-3.1.1.min.js');
$(document.head).append(s);
s = document.createElement('script');
s.src = chrome.extension.getURL('js/jquery-ui.min.js');
$(document.head).append(s);
s = document.createElement('script');
s.src = chrome.extension.getURL('js/primeui-all.min.js');
$(document.head).append(s);
s = document.createElement('script');
s.src = chrome.extension.getURL('js/x-tag-core.min.js');
$(document.head).append(s);
s = document.createElement('script');
s.src = chrome.extension.getURL('js/primeelements.min.js');
$(document.head).append(s);
s = document.createElement('script');
s.src = chrome.extension.getURL('js/eventPage.js');
$(document.head).append(s);
Duplicating your problem in a snippet
The following snippet duplicates your problem by sequentially inserting
<script>elements. I am using network resources, because there is no method of storing such scripts on Stack Overflow. Given that you only supplied version information for jQuery, I have had to guess at appropriate versions for the other libraries which you are using.In order to stay close to the code which you are using in your Chrome extension,
chrome.extension.getURL()is faked. In these snippets, that function returns a functional network URL for the libraries which you are using. Obviously, in your Chrome extension, you will want to continue to use the library files which you ave included with your extension.In addition, the code for
eventPage.jsis faked by having some code that reports if jQuery exists, if$(document).puidialogis a function, and/or ifxtagis defined. The errors you are seeing are that$([something]).puidialogwas not a function andxtagwas not defined. ThisfakeEventPageJScode accurately shows if the scripts have been properly loaded.In this duplication of your problem, an error is also produced from the various libraries as the subsequent libraries can not find prior libraries.
Insert each
<script>in theonloadevent handler of the prior scriptIt is clear that the inserted
<script>elements are executed asynchronously. In order to force them to be executed synchronously, we need to insert the next script after the prior one has completed execution. This can be done by utilizing theloadevent for each script.The following code loads each subsequent script in the
loadevent handler of the prior script.The function
createScriptElementcreates an individual<script>element. This function can be somewhat simplified in your code due to not needing to fake the eventPage.js script.The function
createScriptSequencecreates a sequence of<script>elements which each inserts the next script in itsonloadlistener. This usesscript.addEventListerner('load',...)in order to be immune to the script being loaded changing thescript.onloadproperty/attribute.