有没有一种方法可以从文件中插入脚本，然后再插入其他脚本？

Question

我正在尝试在其他脚本运行之前将vue从内容脚本插入页面。我将框架另存为文件，位于扩展目录中，可以使用以下代码注入它：

let s = document.createElement('link');
s.as = 'script';
s.rel = 'preload';
s.href = chrome.runtime.getURL('vue.min.js');
document.documentElement.insertBefore(s, document.documentElement.firstChild);

内容脚本在document_start上运行，因此我希望它在构建脚本之前就将该脚本注入DOM中，因此它是第一个加载的脚本。这不是真的：

稍后加载。即使它具有更高的优先级，即使我将脚本设置为defer并且vue之前的加载完成，它仍然在脚本之后运行。为什么会发生这种情况，有什么方法可以确保我的脚本首先加载/执行？

Answer 1

通过URL加载单独的脚本文件会将其放入共享队列中，以便与页面脚本竞争，请参见https://crbug.com/634381。

唯一的解决方法是使用script元素作为文字字符串使用textContent元素（示例：请参见method 2）。当然，内容脚本应在manifest.json中用"run_at": "document_start"声明。

如果代码很大，为了保持代码的可维护性，您自然要使用一个单独的文件，以便可以配置webpack（或其他任何文件）并在内容脚本中使用特殊的占位符，然后将其替换为包含文件文本的文字字符串。