Question

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

我对这不会导致问题的定期感到有些困惑。

我的意思是，如果我在已经包含JQuery版本y的页面中注入JQuery的x版本（通过我的浏览器扩展），那么事情仍然可以工作？ $()函数不会发生冲突吗？

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

Answer 1

尽管noConflict()大部分时间都可以用于jQuery，但对于扩展仍然是一个坏主意，并不适用于大多数其他库或实用程序。

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

不可能与网页的javascript冲突。
页面的JS没有任何依赖性，如果更改，恕不另行通知，您的扩展程序将更少破坏。
注入库时，必须从某个外部服务器获取它。这会降低您的扩展速度，并使其容易受到控制之外的崩溃。

当您使用扩展程序包含库时，它是：（a）始终存在，（b）始终是已知良好的版本，（c）几乎立即从本地计算机加载，而不是远程服务器。< / p>
即使页面的javascript已停用，您的扩展程序也可以投放。
您的扩展程序可以同时利用库和扩展API。

通过扩展可以很容易地合并一个像jQuery这样的库。例如，使用Chrome：

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

将库添加到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和其他浏览器的机制类似。

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

该扩展程序仅适用于一个特定网站。
你绝对肯定地必须使用目标页面创建的一些对象/功能。
在扩展程序中轻松复制功能太复杂了。
您不介意为网站设计的每一个小改动重写或调整您的扩展程序。
您可以确定所有用户都将启用该网站的JavaScript。
您可以确定为您的图书馆提供服务的网站速度相当快，并且不会经常离线。

Answer 2

此问题的常见解决方案是使用jQuery.noConflict（）将jQuery别名为另一个变量，确保它不与页面的$冲突。

Answer 3

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

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

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

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

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

3 个答案: