在Chrome扩展中加载外部javascript

Loading external javascript in a Chrome Extension

本文关键字：外部 javascript 加载 Chrome 扩展      更新时间：2023-09-26

我正在尝试在Chrome扩展中加载一些外部javascript代码。然而，由于扩展的沙盒环境，我看不到任何由外部代码定义的函数。

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

还有一个问题是，由于所有的扩展代码都是沙盒的，所以我无法完全访问文档——例如，它无法访问窗口变量。

但是，如果我把所有的代码都放在外部代码中，如果一个脚本试图加载另一个脚本，我就会遇到内容安全问题。我之所以去做扩展，是因为现存的每一个浏览器都严重错误地实现了CSP，bookmarklet无法访问外部资源。

绕过扩展沙盒或绕过扩展沙箱工作的最佳实践是什么，以便基本上能够像页面本身加载了代码一样运行代码，而不会出现任何CSP问题？

在内容脚本中，您可以执行以下操作来加载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文件是用扩展名打包的，那么它必须放在web_acceptable_resources下的manifest.json。但是，它需要具有与它在(http | https) 中注入的页面相同的协议

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

相关文章：