在Chrome扩展中将远程脚本作为内容脚本

Question

我正在尝试将远程脚本作为Chrome扩展中的内容脚本注入，但我感觉自己陷入了Chrome执行环境的模糊地带（至少对我来说是这样）。

我想使用jQuery的$.getScript来实现此目的（以及其他目的）。

以下是注入代码（在这里明智地建议）：

// inject jQuery
chrome.tabs.executeScript(null, { file: "js/jquery.js" }, function() {
   // inject remote script with jQuery
   chrome.tabs.executeScript(null, { code: '$.getScript("https://mysite.com/myremotescript.js", function(){ })' });
});

以下是远程脚本myremotescript.js - 它非常简单：

$("body").css("backgroundColor", "green");

错误信息为: "$未定义"

错误中提到的$似乎是指myremotescript.js函数中的变量，如果将myremotescript.js更改为以下内容，则代码可以正常工作：

document.body.style.backgroundColor = "green";

看起来不仅仅是 $ 没有定义。如果我将 myremotescript.js 改为：

function Do(){
    document.body.style.backgroundColor = "green";
}

然后在$.getScript的回调函数中执行Do()：

chrome.tabs.executeScript(null, {
    code: '$.getScript("https://mysite.com/myremotescript.js", function(){ Do(); })' 
});

错误是： "Do is not defined"。有什么想法/解释/建议吗？编辑：解决方案：根据 @Rob-W 的回答，它起作用了。唯一需要添加的怪癖是将数据类型标记为“文本”，以使$.get()不会出错。另外，我不需要执行eval，因为executeScript可以接受代码文本。

$.get("https://mysite.com/myremotescript.js", null, null, "text")
    .done(function(remoteCode){
        chrome.tabs.executeScript(null, { code: remoteCode }, function(){
            chrome.tabs.executeScript(null, { code: "Do();" });
    });
})

- New Dev

Answer 1

$.getScript的默认行为是注入一个<script>元素从不同域名加载脚本。因此，代码在页面的上下文中运行，而不是内容脚本中(另请参阅)。

如果你真的想使用jQuery来获取脚本，请替换

$.getScript("https://mysite.com/myremotescript.js", function(){ });

使用以下内容（eval 作为回调函数，因此它会评估请求的响应）

$.get("https://mysite.com/myremotescript.js", eval);

虽然这样可以运作，但我建议缓存脚本的响应主体。这样，如果网络连接中断，您的扩展程序将不会中断。更重要的是，用户不会在每个页面加载时收到无用的请求。我以前已经详细阐述了这个概念，请参见this answer。

- Rob W

---

谢谢Rob。看起来因为我使用$.get()进行跨域xhr，所以需要添加匹配模式的权限（出于某种原因，$.getScript()不需要）。这是真的吗？在扩展安装期间是否向用户添加特殊警告？ - New Dev

只需"可以访问example.com上的所有数据"。请参阅https://developer.chrome.com/extensions/permission_warnings.html。 - Rob W

是的...从用户混淆的角度来看，这有点糟糕，如果没有别的原因。我能不能在后台/页面中使用$.getScript来克服这个问题，然后检索<script>标签的innerHtml并将其应用于executeScript？ - New Dev

啊不，我收回之前的说法...它会添加一个指向远程资源的<script>元素... - New Dev