jQuery не будет добавлять прослушиватели событий в Firefox WebExtensions

Question

Я сейчас пишу WebExtension под Firefox, и я застрял на взаимодействии со страницей. У меня есть сценарий содержимого, которому нужен доступ к переменным страницы, например, экземпляр jQuery.

Я доступ к JQuery с

var $ = window.wrappedJSObject.$; 

И это работает довольно хорошо, я могу добавить DOM элементов страницы и т.д., но есть проблема с обработкой событий. Например, этот код работает отлично:

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

Но когда я пытаюсь добавить обработчик событий, он не

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

Сообщение об ошибке говорит, что

Доступ запрещен доступ к собственности «обработчик "

Мое предположение: Firefox WebExtensions имеет некоторые меры безопасности которые не позволяют легко добавлять обработчики событий, но мне не повезло в том, что является причиной. Как я могу заставить его работать?

Answer 1

Ваша проблема заключается в том, что вы пытаетесь определить функцию в процессе сценария контента (анонимный click прослушиватель), но выполнили ее из контекста страницы в качестве обработчика события. Это приводит к тому, что функция недоступна для jQuery для управления, а также для ее фактического добавления в качестве слушателя.

Правильное решение заключается в том, чтобы сохранить код, который работает в контексте страницы, отдельно от кода, который выполняется в процессе сценария содержимого. Любой код, который вы хотите использовать в контексте страницы, должен обрабатываться с использованием одного из методов, описанных в Building a Chrome Extension - Inject code in a page using a Content script. Затем вы должны обмениваться данными между ними через любую из доступных доступных методологий.

Что я хотел бы порекомендовать, так это то, что вы загружаете версию jQuery, которую хотите использовать, включить ее в расширение и включить в скрипты, которые вы вводите в качестве сценариев контента. Вы можете использовать эту версию jQuery для большей части того, что вы делаете. Когда вам действительно нужно управлять состоянием объекта jQuery контекста страницы, вы можете затем получить к нему доступ через различные методы в ответе, указанном выше. Вы можете, если хотите, чтобы ваше расширение было только Firefox, используйте window.wrappedJSObject для доступа к jQuery, который существует в контексте страницы, для тех вещей, для которых вам действительно нужен этот доступ. Это приводит к собственным ограничениям. Один из которых вы уже столкнулись.

Выполнение того, что вы, кажется, хотите сделать так, чтобы быть совместимым с несколькими браузерами, требует такого же количества усилий по кодированию, как и в случае с ситуацией, когда вы отлично себя чувствуете в Firefox (есть варианты для этого). В дополнение к тому, что он будет совместим с кросс-браузером, он также делает его еще более надежным.