Web扩展和Web应用程序之间的通信模式和实践



我正在开发一个扩展,我对web应用程序之间的通信、扩展的内容脚本以及内容脚本和后台脚本之间的通信有点困惑。似乎要使用HTML5 Messaging API,但如何在精确的上下文中做到这一点不仅很难理解和实现,而且由于浏览器(似乎支持相同的API)中的方法不同而令人困惑。

例如,Firefox无法识别manifest.json中的externally_connectable,即为请求来源的主机分配权限的位置。那么Firefox希望开发者如何分配权限呢?我想它希望你在内容脚本中这样做?

特别是,我对在应用程序和内容/后台脚本之间交换数据的最佳方式感到困惑。是postMessage/addListener方法的最佳方式,并且它们在所有上下文中都有效吗;或者正如有人提到的:window.dispatchEvent应该是首选?

感谢所有与上述要点相关的指南。

来自扩展之外的消息不是我的经验(我不确定这是什么意思)。

你应该确保你完全理解铬扩展概述,这绝对是必读的。

关于Window.dispatch和使用其他API,我的建议是坚持使用chrome.xxx API,除非有他们做不到的事情。

扩展中可能有3个作用域,它们只能通过消息传递进行通信,但消息传递很容易实现,实际上可以带来良好的设计。

内容脚本是与页面本身交互的关键,但它们的范围与页面不同,js是孤立的,但它们当然可以访问DOM。

可以在加载每个页面时加载内容脚本,也可以通过在清单中包含某些页面来加载内容脚本。或者有力地说,它们可以通过后台页面或弹出窗口注入-因此,如果你打算从弹出窗口进行控制,你可以使用程序注入-一个有用的模式是,弹出窗口(或后台)可以在选项卡中启动一个url,注入jquery(任何版本,因为它是孤立的),然后注入内容脚本,然后,内容脚本可以使用$(document).ready()来等待页面加载(不必使用jQuery,但事实上,您可以不关心页面是否有jQuery,或者它可能有什么版本),这很有用。

如果你已经知道了这么多,你可能不会像你想象的那样困惑:)

最新更新