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

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

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

我的意思是，如果我（通过我的浏览器扩展）在一个已经包含JQuery版本y的页面中插入了JQuery版本x，那么事情怎么还能继续工作呢？

$（）

函数不会有冲突吗

---

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

解决此问题的常见方法是使用jQuery.noConflict（）将jQuery别名为其他变量，确保它不与页面的

$

jQuery有一个

noConflict（）

函数，可以使用

$

名称空间（例如jQuery的另一个实例）将jQuery与其他任何东西隔离开来

<> P>一种更为普遍的避免前缀命名空间污染的方法是考虑在闭包中执行JavaScript。

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

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

虽然对于jQuery来说，

noConflict（）

可能在大部分时间都有效，但对于扩展来说，这仍然是一个坏主意，并且不适用于大多数其他库或实用程序

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

不可能与页面的javascript冲突

对页面的JS没有依赖性，JS会在没有通知的情况下更改，因此扩展中断的频率会降低

当您注入一个库时，它必须从某个外部服务器获取。这会减慢您的扩展速度，并使其容易发生超出您控制范围的崩溃

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

即使页面的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

您可以确保为您的库提供服务的站点速度相当快，并且不会经常脱机

---

许多注入使用的另一个良好实践是在注入之前检查jQuery是否已经存在。如果做不到这一点，是的，没有冲突可以工作。（每当我必须做这类事情时，我通常使用

$$

，但是如果你想超级安全，你可能想使用

YourPlugin$

。这听起来可能很痛苦，但是如果你使用模块模式（你可能无论如何都应该使用它）每个文件只需键入一次。我认为内容\脚本总是被注入的-看看Chrome文档：，在第一段“清单”中。尽管该页面误用了术语“注入”，但它们并不意味着“注入”与其他任何人使用该术语的方式相同（在目标页面范围内运行的代码）事实上，Chrome文档描述了其他地方的实际行为，包括在同一页的后面。请参阅……“注入”的常见和正确用法是当您的脚本或扩展创建

节点（或

unsafeWindow

的某些用法）时。您是对的-在该段中，他们甚至说“例如，一个内容脚本可以包含JQuery v1，而页面可以包含JQuery v2，它们不会相互冲突。”-这正是我想要的。谢谢。基本上，我被他们使用“注入”这个词的方式弄糊涂了。是的，该页面的使用令人困惑且不标准。这只是用于Chrome吗？