如何在Chrome扩展程序的内容脚本中使用jQuery而不发生冲突

Question

如何在我的Google Chrome扩展中使用jQuery，而不与网页上的脚本冲突？因为当我使用jQuery并且网页上的另一个脚本使用 $ 时，我的内容脚本会崩溃或该网页会崩溃。

- EaterOfCode

---

我不明白。内容脚本和页面是隔离的。 - Denys Séguret

@DenysSéguret，只有执行是隔离的，内容脚本实际上操作相同的DOM并且可以注入冲突代码-因此这不是那么明显：隔离的世界不允许内容脚本、扩展和网页访问其他人创建的任何变量或函数。 因此，在清单中定义脚本时不会出现问题，除非您开始注入来自您的脚本的代码。 - jave.web

Answer 1

“真正的”答案是您不需要使用“自运行私有函数”。 您需要了解内容脚本是独立执行的，因此根据设计不能与网站使用的资源发生冲突。

如果您想在内容脚本中使用库，则首选方法是将其包含在扩展/应用程序中，然后在清单中首先加载它；

{
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]
  ...
}

这将导致jquery.js被加载到您的私有内容脚本环境中，然后是myscript.js。由于它不包含外部库的压缩代码，因此您的代码将更加清洁和模块化。 来源: https://developer.chrome.com/extensions/content_scripts

- neocotic

---

由于内容脚本更改JavaScript环境的方式，这不是一个问题。官方文档中的“执行环境”部分对此有很好的覆盖。 - neocotic

我看到文档恰好涵盖了 jQuery 的情况：“例如，内容脚本可以包含 JQuery v1，页面可以包含 JQuery v2，它们不会相互冲突。” - Denys Séguret

jQuery本身只是一个库，不会做出您没有告诉它的任何更改。与大多数常用库一样，它仅通过使用一个或多个全局变量来公开其功能。如果您正在使用一个在没有任何指令的情况下更改DOM的库，您可能会意识到这一点，因为该行为可能会与其功能相呼应。 - neocotic