我目前正在Firefox下编写WebExtension，而且我一直坚持与页面进行交互。我有一个内容脚本需要访问页面变量，例如jQuery实例。
我正在使用
访问jQueryvar $ = window.wrappedJSObject.$;
这非常好用，我可以将DOM元素添加到页面等，但是事件处理存在问题。例如，此代码可以正常工作：
$('#nav-bar').append('<img src="..."/>'); // Works great
但是当我尝试添加事件处理程序时，它失败了
$('#button').click(function () {}); // Fails
错误消息说
访问属性＆＃34;处理程序＆＃34;
的权限被拒绝
我的猜测是Firefox WebExtensions有一些安全措施可以防止轻松添加事件处理程序，但我很遗憾看起来是什么原因。我怎样才能使它发挥作用？
答案 0 :(得分：2)
您的问题是您正在尝试在内容脚本进程中定义一个函数（匿名click侦听器），但是将它作为事件处理程序从页面上下文中执行。这导致jQuery无法操作该函数，也无法将其实际添加为侦听器。
对此的正确解决方案是使在页面上下文中操作的代码与在内容脚本过程中执行的代码分开。您希望在页面上下文中运行的任何代码都应使用Building a Chrome Extension - Inject code in a page using a Content script中描述的方法之一进行处理。然后，您应该通过任何常规可用方法在它们之间来回通信。
我建议您下载您想要使用的jQuery版本，将其包含在您的扩展中，并将其包含在您作为内容脚本注入的脚本中。然后，您可以在大多数情况下使用该版本的jQuery。当确实需要操作页面上下文jQuery对象的状态时，您可以通过上面链接的答案中的各种方法专门访问它。如果您希望扩展程序仅为Firefox，则可以使用window.wrappedJSObject访问页面上下文中存在的jQuery，以获取您真正需要访问权限的内容。这样做有其自身的局限性。其中一个你已经遇到过。
以跨浏览器兼容的方式执行您希望执行的操作所花费的编码工作量与处理您自己以Firefox特定方式处理的情况相同（有选项可以执行此操作）。除了它可以跨浏览器兼容的好处之外，还使它更具有前瞻性。