在 Chrome 扩展程序中加载外部 javascript

Question

我正在尝试在我的 Chrome 扩展程序中加载一些外部 javascript 代码。但是，由于扩展的沙盒环境，我看不到外部代码定义的任何功能。

外部代码实现了一种依赖机制，一个 javascript 文件可能需要另一个，依此类推。它还查看用于加载 javascript 的 URL 的参数，以确定要加载的顶级 javascript 文件。所以它基本上可以加载任意的 web 应用程序，并且事先并不知道将要使用的所有文件。所以我不能在扩展中使用任何静态定义。

还有一个问题是，由于所有扩展代码都被沙盒化，我无法完全访问文档 - 例如，它无法访问 window 变量。

但是，如果我将所有代码都放在外部代码中，如果一个脚本尝试加载另一个脚本，我就会遇到内容安全问题。我去的全部原因是扩展程序是因为现有的每个浏览器都对 CSP 的愚蠢错误实现，因此小书签无法访问外部资源。

绕过或绕过扩展沙箱以基本上能够像页面本身已加载代码一样运行代码，而 CSP 没有任何问题的最佳做法是什么？

Answer 1

在内容脚本中，您可以执行类似的操作来加载 js 文件

function inject(url, exteral) {
    // 1. Build the absolute URL
    // 2. Create a script tag and set src attribute
    // 3. Append script tag to thw window
    if (!external){
       url = chrome.extension.getURL(url);
    }
    var scriptElement = document.createElement('script');
    scriptElement.src = url;
    (document.body || document.head || document.documentElement).appendChild(scriptElement);
}

如果js文件带有扩展名，必须放在 manifest.json 在web_accesible_resources 下。 否则它需要与注入它的页面具有相同的协议(http | https)

由于内容脚本不允许调用窗口函数，您可以 调用window.postMessage 将数据从实际窗口发送到内容脚本。