如何实现发布/订阅“模式”在网站和谷歌浏览器扩展之间的javascript中?
我正在尝试在网站和 google chrome 扩展程序之间实现发布/订阅模式。到目前为止,我的大部分实验都是使用 jQuery,因为它具有强大的绑定/触发语法,但我一直运气不佳。
背景: 我正在使用一个开源的、基于 Ruby/Rails 的 Pomodoro Technique 实现。我修改了该网站的代码,以使用 jQuery 的 $.trigger 语法公开其活动,以发布计时器会话开始和计时器会话结束的可观察事件。这些触发器的工作范围是我可以跟踪 jQuery 事件代码的执行情况。所以该网站是几个相关事件的发布者。
我通过加载 jquery 并使用 .bind() 语法绑定到网站发布的自定义事件,在 google chrome 扩展中实现了事务的侦听器/订阅者端。该扩展程序正在为网站加载,并且已为网站 URL 内的所有路径设置了权限。
从出版方面我已经尝试过 $.event.trigger() 和 $(文档).trigger() 为了尽可能通用,在订阅者端,我尝试绑定到几个相关元素,最常见的是 $(document).bind()
当我通过在扩展中的绑定调用后暂停执行来观察自定义事件绑定时执行并分析结果 console.dir($(文档).data('事件')); 我在列表中看到我尝试订阅的自定义事件。
但是,当我分析 console.dir($(document).data('events')); 的结果时在网站端触发自定义事件之前,所需的事件处理程序不会出现在列表中。
我是否遗漏了一些明显的事情应该如何运作?
ps 我应该注意,如果我直接绑定到触发更改的元素上的“click”事件,我的扩展代码可以完美工作,但是站点的 DOM 在执行过程中发生变化,因此绑定不会太久就中断,所以我希望某种发布-订阅机制可能更明智。
编辑
正如我对 @ChrisNZL 的回答的回复中所指出的,我尝试过 .live() 而不是 .bind() 并看到相同的行为。
I'm trying to implement a pub/sub pattern between a website and a google chrome extension. Most of my experimentation thus far has been using jQuery due to its strong bind/trigger syntax but I've been having little luck.
Background:
I'm working with an open source, Ruby/Rails-based Pomodoro Technique implementation. I've modified the site's code to expose its activity using jQuery's $.trigger syntax to publish observable events for the start of a timer session and the end of a timer session. Those triggers work in so far as I can trace the execution into the jQuery event code. So the site is the publisher of a couple of relevant events.
I've implemented the listener/subscriber end of the transaction in a google chrome extension by loading jquery and using the .bind() syntax to bind to the custom events being published by the site. The extension is loading for the site and has permissions set for all paths within the url for the site.
From the publication side I've tried both
$.event.trigger()
and
$(document).trigger()
to be as general as possible, on the subscriber side I've tried binding to several relevant elements, the most general being $(document).bind()
When I observe the custom event binding by pausing execution after the bind calls in the extension are executed and analyze the results of
console.dir($(document).data('events'));
I see the custom events I'm trying to subscribe to in the list.
However when I analyze the results of console.dir($(document).data('events')); just before triggering the custom event on the website side, the requisite event handlers do not appear in the list.
Am I missing something obvious in how this should work?
p.s. I should note that if I bind directly to the 'click' event on the elements that trigger the changes my extension code work perfectly, but the DOM of the site changes during execution so the bindings break after not too long so I was hoping that some sort of pub-sub mechanism might be more sensible.
EDIT
As noted in my response to @ChrisNZL's answer, I've tried .live() instead of .bind() and see the same behavior.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您如何在网站和扩展程序之间进行交互?
请注意,您通过扩展程序 API 注入的内容脚本无法访问以下 JavaScript主页,因此您无法获取在 jQuery 代码中导出的自定义事件。
解决此问题的方法是使用普通的全局范围脚本注入(即将脚本标记附加到主体)。你尝试过这样做吗?
How are you interacting between the site and the extension?
Note that content scripts you inject through the extension APIs can't access the JavaScript of the main page, so there's no way you can get at the custom events you export in your jQuery code.
A workaround to this is to use ordinary global scope script injection (ie. append a script tag to the main body). Have you tried doing this?
你看过 jQuery 的
.live()
吗?行为类似于.bind()
但附加“一个处理程序到与当前选择器匹配的所有元素的事件,现在和将来”,这意味着绑定不应中断。Have you looked at jQuery's
.live()
? Acts like.bind()
but attaches "a handler to the event for all elements which match the current selector, now and in the future", meaning bindings shouldn't break.