浏览器扩展：如何将 javascript 代码注入页面而不会发生冲突？

Question

我已经开始开发浏览器扩展。我注意到一个常见的概念是扩展可以将 JS 代码注入到当前浏览器选项卡中。

我有点困惑，为什么这不会经常引起问题。

我的意思是，如果我将版本 x 的 JQuery（通过我的浏览器扩展）注入到已经包含版本 y 的 JQuery 的页面中，事情怎么可能仍然有效？ $()函数不会有冲突吗？

事情怎么可能这么顺利？开发人员是否应该采用任何特定技术来确保不会发生此类冲突，或者浏览器会处理所有事情？

Answer 1

虽然noConflict() 可能大部分时间都适用于 jQuery，但它对于扩展来说仍然是个坏主意，并且不适用于大多数其他库或实用程序。

明智的做法是根本不注入代码（有一个例外¹）。该扩展可以包含您需要的任何库，这样做有很多好处：

1. 不可能与页面的javascript发生冲突。

2. 不依赖页面的JS，更改不另行通知，您的扩展将不那么频繁地崩溃。

3. 当您注入一个库时，它必须从某个外部服务器获取。这会减慢您的扩展程序并使其容易受到您无法控制的崩溃的影响。

   当您在扩展中包含该库时，它是：(a) 始终存在，(b) 始终是已知良好的版本，以及 (c) 几乎立即从本地计算机加载，而不是从某个遥远的服务器加载。

4. 即使页面的 javascript 被禁用，您的扩展程序也可以运行。

5. 您的扩展程序可以同时利用库和扩展程序 API。

使用扩展很容易合并像 jQuery 这样的库。例如，使用 Chrome：

1. 将库文件复制到您的扩展文件夹。

2. 将库添加到manifest.json 文件。

   包含 jQuery 的简单清单可以是：

   {
       "content_scripts": [ {
           "exclude_globs":    [  ],
           "include_globs":    [ "*" ],
           "js":               [ "jquery.min.js", "myJS.js" ],
           "matches":          [ "http://stackoverflow.com/*"
                               ]
       } ],
       "description":  "Hello world with jQuery",
       "name":         "Hello world with jQuery",
       "version":      "1"
   }
   

Firefox 和其他浏览器的机制类似。

---

¹ 一个例外？对于扩展，当且仅当满足所有这些条件时才注入代码：

1. 该扩展程序仅适用于一个特定站点。
2. 您绝对必须使用目标页面创建的某些对象/函数。
3. 在扩展程序中轻松复制功能太复杂了。
4. 您不介意为网站设计的每一个细微变化都重写或调整您的扩展程序。
5. 您可以确保所有用户都启用了网站的 javascript。
6. 您可以确定为您的图书馆提供服务的网站运行速度相当快，而且不会经常离线。

Answer 2

jQuery 有一个 noConflict() 函数，可用于将 jQuery 与使用 $ 命名空间的其他任何东西（例如 jQuery 的不同实例）隔离开来。

避免前向命名空间污染的更通用方法是考虑在闭包中执行 JavaScript。

(function () {
    // Your Code Here
})();

这将阻止闭包范围内的任何内容在您自己的代码之外可用。

Answer 3

此问题的常见解决方案是使用 jQuery.noConflict() 将您的 jQuery 别名为不同的变量，确保它不会与页面的 $ 冲突。