如何使用 <script> 将脚本顺序插入到页面上下文中标签 [英] How to sequentially insert scripts into the page context using <script> tags
问题描述
我在使用 <script> 标签从 content_script 脚本加载我插入到页面上下文中的所有脚本时遇到问题，因为它们必须是以正确的加载顺序执行，因为有些依赖于其他.在一个实际的 HTML 文件中，我猜有一个队列来加载文件，但是通过插入 <script> 标签，如果一个脚本延迟一点时间，下一个脚本开始加载然后是立即执行，尽管它必须等待仍在加载的依赖库.
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.
下面是由于x-tag-core.min.js在primeui-all.min.js和之前加载导致错误的网络输出>eventPage.js 使用 jquery-ui.min.js，在它之前加载:
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);
推荐答案
在片段中复制您的问题
以下代码段通过依次插入
