浏览器扩展:如何在页面中注入javascript代码而不会发生冲突? [英] Browser extensions: how can injecting javascript code into a page work without conflicts?

问题描述

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

我不知道这怎么不会定期引起问题.

我的意思是，如果我在已经包含y版本y的页面中(通过浏览器扩展)注入y版本的jquery，那怎么办? $()函数不会有冲突吗?

如何顺利进行?开发人员是否应该采用任何特殊的技术来确保不会发生此类冲突，或者浏览器可以处理所有事情?

解决方案

虽然noConflict()在大多数情况下都适用于jQuery，但对于扩展来说仍然不是一个好主意，并且不适用于大多数其他库或实用程序.

聪明的事情是根本不注入代码(一个例外是 ¹ ).该扩展可以包含您需要的任何库，这样做有很多好处:

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

2. 该页面的JS没有依赖关系，它的更改恕不另行通知，您的扩展名中断的频率会降低.

3. 在注入库时，必须从某个外部服务器获取它.这样会使您的扩展程序变慢，并使它容易受到控件外部崩溃的破坏.

   在扩展中包含库时，它是:(a)始终存在，(b)始终是已知良好的版本，并且(c)几乎立即从本地计算机而不是远程服务器加载./p>

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. 您可以确定，为您的图书馆提供服务的网站速度相当快，并且不会经常离线.

I have started developing browser extensions. I noticed a common concept is that the extension can inject JS code into the current browser tab.

I am a bit puzzled of how that doesn't cause issues on a regular basis.

I mean, how can things still work if I inject version x of JQuery (through my browser extension) in a page that has already included version y of JQuery? Won't there be a conflict for the $() function?

How is it possible things go that smoothly? Is there any particular technique the developer should employ to make sure such conflicts won't happen, or the browsers take care of everything?

解决方案

While noConflict() may work most of the time for jQuery, it is still a bad idea for extensions and doesn't apply to most other libraries or utilities.

The smart thing to do, is do not inject code at all (with one exception¹). The extension can include any libraries you need and there are many benefits to doing so:

1. There is no possibility of conflict with the page's javascript.

2. There is no dependency on the page's JS, which changes without notice, Your extension will break less often.

3. When you inject a library, it has to be fetched from some external server. This slows your extension and makes it vulnerable to crashes outside of your control.

   When you include the library with your extension, it's: (a) always present, (b) always a known-good version, and (c) loads almost instantly from the local machine, not some far-off server.

4. Your extension can run, even if the page's javascript is disabled.

5. Your extension can take advantage of the library and the extension APIs, simultaneously.

Incorporating a library, like jQuery is easy with an extension. For example, with Chrome:

1. Copy the library file(s) to your extension folder.

2. Add the library to the manifest.json file.

   A simple manifest that incorporated jQuery could be:

   {
       "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"
   }
   

The mechanism is similar for Firefox and other browsers.

---

¹ The one exception? For an extension, inject code if, and only if, all of these conditions are met:

1. The extension is only for one particular site.
2. You absolutely, positively, have to use some object/function that the target page creates.
3. It is too complicated to easily duplicate the functionality in your extension.
4. You don't mind having to rewrite or adjust your extension for every little change to the site's design.
5. You can be sure that all users will have the site's javascript enabled.
6. You can be sure that the site serving your library is reasonably fast and isn't offline too often.

这篇关于浏览器扩展:如何在页面中注入javascript代码而不会发生冲突?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！