jQuery 不会在 Firefox WebExtensions 中添加事件监听器答案

【问题标题】：jQuery won't add event listeners in Firefox WebExtensionsjQuery 不会在 Firefox WebExtensions 中添加事件监听器
【发布时间】：2023-03-23 13:39:01
【问题描述】：

我目前正在 Firefox 下编写 WebExtension，并且一直坚持与页面交互。我有一个需要访问页面变量的内容脚本，例如 jQuery 实例。

我正在使用 jQuery 访问

var $ = window.wrappedJSObject.$;

这很好用，我可以将 DOM 元素添加到页面等，但是事件处理存在问题。例如，这段代码运行良好：

$('#nav-bar').append('<img src="..."/>'); // Works great

但是当我尝试添加事件处理程序时，它失败了

$('#button').click(function () {}); // Fails

错误信息表明

访问属性“处理程序”的权限被拒绝

我的猜测是 Firefox WebExtensions 有一些安全措施可以防止轻松添加事件处理程序，但我一直不走运寻找原因。我怎样才能让它发挥作用？

【问题讨论】：

请edit 成为主题的问题：包括一个完整 minimal reproducible example 重复问题。包括一个manifest.json，一些背景/内容/弹出脚本/HTML。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
如果您使用 any 库，包括 jQuery，您应该下载该库，将其包含在您的插件中并将其注入到内容脚本上下文中。你应该不做你正在做的事情，它在内容脚本上下文中执行页面上下文中的函数。这打破了页面上下文和内容脚本上下文之间存在的安全分离。如果您这样做，几乎可以肯定您的附加组件会因为故意打开此安全漏洞而在 AMO 审核中被拒绝。另一种方法是在页面上下文中加载和运行脚本。
感谢您的意见，但我的插件是特定于站点的，永远不会在 AMO 中发布。我知道安全隐患，但这个附加组件将供我个人使用。我的插件需要该页面使用的确切 jQuery 实例才能工作。一开始我运行的是 UserScript，但我认为 WebExtension 有一些我缺少的额外功能。

标签： javascript jquery firefox firefox-addon firefox-addon-webextensions

【解决方案1】：

您的问题是您试图在内容脚本进程（匿名click 侦听器）中定义一个函数，但让它从页面上下文作为事件处理程序执行。这导致该函数无法供 jQuery 操作，也无法实际添加为侦听器。

对此的正确解决方案是将在页面上下文中运行的代码与在内容脚本进程中执行的代码分开。您希望在页面上下文中运行的任何代码都应使用Building a Chrome Extension - Inject code in a page using a Content script 中描述的方法之一进行处理。然后，您应该通过任何正常可用的方法在它们之间来回通信。

我建议您下载想要使用的 jQuery 版本，将其包含在您的扩展中，并将其包含在您作为内容脚本注入的脚本中。然后，您可以在大部分工作中使用该版本的 jQuery。当您真的需要操作页面上下文 jQuery 对象的状态时，您可以通过上面链接的答案中的各种方法专门访问它。如果您希望您的扩展仅是 Firefox，则可以使用 window.wrappedJSObject 访问页面上下文中存在的 jQuery，以获取您真正需要访问的内容。这样做有其自身的局限性。其中一种你已经遇到过。

以一种跨浏览器兼容的方式做你想做的事，与你以 Firefox 特定的方式处理你自己的情况一样多的编码工作（有这样做的选项）。除了可以跨浏览器兼容的好处之外，还使它更具前瞻性。

【讨论】：