首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Safari中的options页onMessage未收到sendMessage

在Safari浏览器中,options页是指浏览器的设置页面,用户可以在该页面中进行各种个性化设置。onMessage和sendMessage是指在浏览器扩展程序中进行消息传递的两个方法。

onMessage是一个事件监听器,用于接收来自其他页面或扩展程序发送的消息。当接收到消息时,可以执行相应的操作。然而,在Safari中,options页无法直接接收来自其他页面或扩展程序的消息,因此无法使用onMessage方法来接收消息。

sendMessage是用于向其他页面或扩展程序发送消息的方法。通过sendMessage方法,可以将消息发送给指定的页面或扩展程序,并在接收方执行相应的操作。

解决这个问题的一种方法是,在options页中使用safari.extension.globalPage对象来发送消息,然后在全局页面(即background页)中使用onMessage方法来接收消息。具体步骤如下:

  1. 在options页中,使用以下代码发送消息:
代码语言:txt
复制
safari.extension.globalPage.contentWindow.postMessage(message, targetOrigin);

其中,message是要发送的消息内容,targetOrigin是目标页面的URL。

  1. 在全局页面(background页)中,使用以下代码监听消息:
代码语言:txt
复制
safari.application.addEventListener("message", handleMessage, false);

function handleMessage(event) {
  // 处理接收到的消息
}

通过以上方法,可以在options页中向其他页面或扩展程序发送消息,并在全局页面中接收并处理这些消息。

需要注意的是,Safari浏览器的扩展开发相对于其他浏览器来说较为独特,因此在开发过程中可能会遇到一些限制和特殊情况。在处理消息传递时,建议参考Safari官方文档和开发者论坛,以获取更详细的信息和解决方案。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

摆脱客户端?网页发起直播势在必行!

设备 我们看看如何用原生Web API去获取设备(以下示例代码可适用于Chrome,其他浏览器暂测试;具体浏览器兼容性可参考官方文档,本文档底部有链接)。...,label值为空,授权允许后可拿到label值,如下两图所示) 获取所有设备截图(授权): image.png videoinput已授权截图: image.png 获取到设备列表后,可设置...,想要实现屏幕共享功能需要借助Chrome插件去获取screen(显示器屏幕)、application windows(应用窗口)和browser tabs(浏览器标签)。...backgroundscripts传入需执行js文件。 添加permissions: ['desktopCapture'],用来开启屏幕共享权限。...SDK那边给答复是:因为缓存问题,会以第一次推流设置参数为准,将会在下个版本修复。

2.9K61

chrome插件实时通信几种方式

在chrome[1]插件开发我们知道,background.js是独立于浏览器,在background.js主要负责popup与content.js交互,在某些时候,也许你需要在一个插件设置与...在插件通信中,我们先从background、popup、content来一起重温那些常用通信交互 background.js chrome.runtime.onMessage.addListener...: "light" }); }; 我们会发现backrgound.js收到了来自set页面的信息 // background.js chrome.runtime.onMessage.addListener...,比如一个插件设置与content.js实时通信,我们是借助先查询所有的tabs,chrome.tabs.query({}, callback),然后再向所有的tabs发送消息chrome.tabs.sendMessage...(id, data),最后在content.jschrome.runtime.onMessage监听发送过来消息 本文示例code example[2] 参考资料 [1]chrome: https:

1.9K10
  • 浏览器跨 Tab 窗口通信原理及应用实践

    sendMessage(data) 函数用于向 BroadcastChannel 发送消息。 handleMessage(event) 函数用于处理接收到消息。...在连接建立后,为每个端口对象设置了 onmessage 事件处理程序。当端口对象接收到消息时,会触发该事件处理程序。...在 onmessage 事件处理程序,通过遍历 connections 数组,将消息发送给除当前连接端口对象之外所有连接。这样,消息就可以在不同浏览器 TAB 页面之间传递。...当触发右边页面的 Resize,左边页面会利用 worker.port.onmessage = function() {} 收到基于 worker.port.postMessage(data) 发送信息...但是,如果页面已经存在一个音乐播放详情,则不会打开新音乐播放详情,而是直接使用已经存在播放详情页面; 系统有与列表与内容,在内容点击已阅,如果用户同时打开了上级列表,要取消列表关于该内容提示

    80310

    【干货】Chrome插件(扩展)开发全攻略

    "newtab": "newtab.html" }, // Chrome40以前插件配置写法 "options_page": "options.html", // Chrome40以后插件配置写法...option(选项) 所谓options,就是插件设置页面,有2个入口,一个是右键图标有一个“选项”菜单,还有一个在插件管理页面: ? ?...我们先看老版options: { // Chrome40以前插件配置写法 "options_page": "options.html", } 这个页面里面的内容就随你自己发挥了,配置之后在插件管理就会看到一个选项按钮入口...chrome.runtime.sendMessage 通信详细介绍 popup和background popup可以直接调用backgroundJS方法,也可以直接访问backgroundDOM...; port.onMessage.addListener(function(msg) { alert('收到消息:'+msg.answer); if(msg.answer && msg.answer.startsWith

    11.7K40

    Java 与 JavaScript 对websocket使用

    ebsocket,HTML5新一代全双工通信协议。其底层仍然是http协议。...当前在线人数为" + getOnlineCount());       }   /**       * 收到客户端消息后调用方法       *        * @param message ...     *            客户端发送过来消息       * @param session       *            可选参数       */   @OnMessage  ...public void onMessage(String message, Session session) {           System.out.println("来自客户端消息:" + ...websocket.onopen = function () {              setMessageInnerHTML("WebSocket连接成功");          }         //接收到消息回调方法

    1.9K60

    跨 Tab 窗口通信是如何实现

    所谓多窗口下进行互相通信,是指在浏览器,不同窗口(包括不同标签、不同浏览器窗口甚至不同浏览器实例)之间进行数据传输和通信能力。...sendMessage(data) 函数用于向 BroadcastChannel 发送消息。 handleMessage(event) 函数用于处理接收到消息。...在连接建立后,为每个端口对象设置了 onmessage 事件处理程序。当端口对象接收到消息时,会触发该事件处理程序。...在 onmessage 事件处理程序,通过遍历 connections 数组,将消息发送给除当前连接端口对象之外所有连接。这样,消息就可以在不同浏览器 TAB 页面之间传递。...当触发右边页面的 Resize,左边页面会利用 worker.port.onmessage = function() {} 收到基于 worker.port.postMessage(data) 发送信息

    28610

    SpringBoot之WebSocket和SSE

    比如,每当收到电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(polling)更有效率。 WebSocket protocol 是HTML5一种新协议。...一开始握手需要借助HTTP请求完成。浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议,为我们实现即时服务带来了两大好处。...("来自客户端消息:" + message); //循环set里的当前链接socket发送信息 for (SendMessage item : webSocketSet...websocket.onopen = function (event) { setMessageInnerHTML("open"); } //接收到消息回调方法...Thread.sleep(1000); return "data: "+new Date().toLocaleString()+"\n\n"; } 6.HTML5网使用

    1.3K30

    WebSocket开发(一对一聊天)功能

    前言 在之前文章:Spring Boot使用WebSocket模拟聊天 简单建立了Spring boot项目并集成了websocket实现了一些入门demo,本篇文章则是在之前基础上增加一对一私聊和统计在线人数等功能...下面代码都是基于上篇文章代码进行修改,开始步骤为了一步步循环渐进所以只展示修改部分代码,如果有感觉不连贯同学可以完成上篇文章后再按本篇步骤执行,完整代码会在最后贴出。 1....acceptId:为接收客户端id sendType:发生消息类型;目前冗余字段,向后扩展使用 2.2 服务端接受 服务端在收到消息时先判断是那种类型消息,默认现在都是1对1消息类型,先将客户端发送...修改为Map结构,key为接收端id,value为一个List,存储这个接收端待发送信息 @OnMessage public void onMessage(String message...(userMessageModel)); } } 3.1.3 补偿逻辑修改 在连接时触发补偿不需要再遍历全部list数据,只需要根据客户端id从Map拿取属于这个客户端待发送数据即可

    1.5K50

    Web窗口通讯方式及使用(postMessageMessageChannelBroadcastChannel)

    发送后再监听收不到之前事件。 在较早版本,不同域下 Safari 浏览器确实存在 postMessage 方法限制。...从 Safari 14 开始,Safari 浏览器已经开始支持跨域 postMessage 方法。...; // 在 iframe1 接收来自 iframe2 消息 port1.onmessage = function(event) { console.log('iframe1...然后,我们使用 postMessage 方法向广播通道发送消息,并在 onmessage 事件处理程序监听来自广播通道消息。...所有订阅了同一广播通道窗口(例如同一域名下多个窗口、标签或 iframe)都将实时接收到广播消息。 发送对象和接收对象不要求是同一个对象,只要频道一样即可。

    1.4K10

    Vue传值与状态管理总结

    ,provide定义值,你可以使用inject进行接收,无论组件之前是如何嵌套,父组件使用provide定义值,你都可以在它子孙组件中使用inject接收到,provide和inject绑定并不是可响应...;它们使用parent和children来查找组件,然后通过vue实例on和emit来实现事件监听和触发,使用他们可以在多重嵌套,触发指定组件方法,而不用考虑嵌套层级问题。...(手机号码、密码),给信息添加修改备注等; 在这段代码,传递visible是为了控制弹窗显示隐藏,我们使用了ElementUIDialog,我们组件作为一个中间传递visible角色,获取父组件给...Mutation更改Vuexstore状态唯一方法,不支持异步,Mutation遵守 Vue 响应规则,必须以合适方式去修改数据,不然可能无法触发页面更新。...Vue({ data: options.state }) this.mutations = options.mutations || {} this.actions = options.actions

    2.2K20

    chrome浏览器扩展v3版本配置项整理备忘

    "key": "xxx", //icon,浏览器扩展程序管理里面的图标、浏览器右侧插件图标点开下拉菜单展示已开启插件图标、以及插件详情标签卡那个小图标 "icons":...://*.xxx.com/*" ] }] } 消息监听 1、插件内部发送消息 //onMessage消息监听 chrome.runtime.onMessage.addListener(function...('触发成功了'); //返回一个内容到发送消息回调函数 }); //发送消息,触发上面的onMessage chrome.runtime.sendMessage('', {text: '我是个测试内容...Id,指定要发送给哪个插件 //第二个参数是想要传给插件数据信息 //第三个是让插件那边调用回调函数,触发回来 chrome.runtime.sendMessage('chromeId', {text..., 外部发送sendMessage不会触发到onMessage

    48040
    领券