多进程 Firefox 扩展可以使用 JQuery 吗？答案

【问题标题】：Can JQuery be used by a multiprocess Firefox extension?多进程 Firefox 扩展可以使用 JQuery 吗？
【发布时间】：2016-03-25 15:20:47
【问题描述】：

Mozilla 文档未提及此问题。有知道的人可以回答和解释为什么或为什么不吗？如果没有，我想知道政策原因和架构决策为什么不这样做。

编辑：这个问题仅限于不能使用附加 SDK 而是使用传统覆盖模式的扩展。

【问题讨论】：

你试过了吗？发生了什么？
@JanDvorak 是的，jQuery 似乎不被直接支持，但可能有一些解决方法，但这让我很困扰，因为我不知道设计者的意图以及是否需要破解工作会在未来中断。暂时没有足够的空间在这里详细介绍。
您可以将其注入到任何在 Firefox 中加载的页面中。您可以创建自己的 html 页面并在那里使用它。 Mozilla 文档没有提到它，因为它是不相关的东西。所有文档都是关于用于控制 Firefox 本身的 javascript。 jQuery 用于网页的跨浏览器脚本（和简化），而不是 Firefox 范围。
@Noitidart 和 8472 jQuery 不仅仅是一个跨浏览器 API！非常方便！听说过“代码重用”吗？？？同样，Chrome 浏览器开箱即用地在其内容脚本中支持第 3 方脚本。为什么我必须解释显而易见的事情？
我强烈建议您避免覆盖。它们正在被弃用。选择经典的引导程序（2011 方法），甚至更好地使用 Addon SDK JPM，这肯定会在未来得到支持developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/…

标签： jquery firefox firefox-addon overlays e10s

【解决方案1】：

Framescripts are not webpages 并且不提供对 jquery 期望存在的大多数全局变量的访问，例如XHR、文档和窗口本身等。

即使您以一种看起来像窗口环境的方式操纵变量，这仍然会产生很大的问题，因为框架脚本的生命周期超出了 DOM 窗口的生命周期，即它的存在与选项卡相关联，而不是到选项卡的各个页面。 Jquery 被设计为只与页面一样长。

第三个问题是安全性，框架脚本使用chrome/system privileges 运行，如果您直接从框架脚本运行它，jquery 也会如此。 Jquery 并非设计为具有安全意识，因为它通常受网站同源策略的约束。事件处理和 XHR 的一些复杂交互可能会因此引发安全漏洞。

所以不推荐在浏览器内部的脚本环境中使用jquery。

从框架脚本进行 DOM 操作的两个选项是

a) 直接从框架脚本中使用标准 DOM API。插件脚本在启用 ES6 支持的情况下自动运行（例如解构、箭头函数等），并且不必担心跨浏览器兼容性。换句话说：不需要jquery

b) 如果使用 jquery 是绝对必要的，例如因为一些第三方库依赖于它，所以可以创建一个sandbox，以当前窗口为原型，并使用subscript loader向其中注入jquery和自定义脚本。

创建沙盒以将其与不受信任的内容隔离并同时放弃系统权限的推荐方法：

let options = {
  // this is the name reported in about:memory
  sandboxName: "<addon name> <purpose of sandbox>",

  // ensure that jquery sees the window as global
  sandboxPrototype: content,

  // reduces GC overhead by having the sandbox reside in the same space as target window
  sameZoneAs: content,

  // don't include components object that grants access to privileged APIs
  wantComponents: false, 

  // helper functions for interacting with untrusted content
  wantExportHelpers: true,

  // clean view of DOM APIs, otherwise untrusted content could override prototypes
  wantXrays: true,

  // addon ID, used by addon debugger and memory reporting
  // sdk addons can obtain it via require("sdk/self").id, other addons define it in the install.rdf
  metadata: {addonID: id}
}

// set the security principal to an extended principal covering the target window
let sandbox = Cu.Sandbox([content], options)

// structured-clone objects into the sandbox
sandbox.myData = {foo: "bar"}

loader.loadSubscript("resource://myaddon-id/libs/jquery.js", sandbox, "UTF-8")
loader.loadSubscript("resource://myaddon-id/src/mypagescript.js", sandbox, "UTF-8")

// call custom function created by mypagescript.js
sandbox.myFunc()

请注意，沙盒仅在页面的生命周期内有效，因此如果框架被导航到新窗口（@987654328@ 对象），您将必须创建一个新沙盒

以上基本就是SDK的page-mod和webextensionscontent-scripts使用的底层底层API。

【讨论】：

感谢 @the8472，但我在 mozilla 开发网站上找不到 loadSubscript() 函数的文档。
我的回答中有一个链接，如果您真的阅读散文而不是仅仅复制粘贴代码，您可能会真正注意到它。
总是粗鲁...@the8472，您的代码示例很有趣，但您没有回答问题...关于为什么框架脚本在设计时具有这些限制。 Moz 文档特别指出框架脚本用于与内容进行交互，但框架脚本环境不适用于常见的脚本库。

【解决方案2】：

看我的 cmets 给你的 OP。您阅读的文档与内容脚本无关。它是关于框架脚本和其他提升范围的。谷歌浏览器没有这些提升的范围。他们只有内容脚本。这就是我们都感到困惑的原因。

这是您在内容脚本中使用 jpm addon sdk 的方式。

将 jquery 库下载到您的数据文件夹中。

var tabs = require("sdk/tabs");
var mod = require("sdk/page-mod");
var self = require("sdk/self");

var pageUrl = self.data.url("page.html")

var pageMod = mod.PageMod({
  include: '*',
  contentScript: [self.data.url('jquery.min.js'), "console.log(jQuery);"]
})

这会将 jQuery 插入所有网站。 tabs.open(pageUrl);

如果您使用 webextensions 的方式与 google chrome 完全相同：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/

【讨论】：