Chrome 插件各模块之间的消息传递

Chrome 插件各模块之间的消息传递

一、消息传递

1. 消息传递分类

  • Chrome 插件的 ActionBackgroundcontent_script 三个模块之间的信息传输
  • 插件和插件之间的信息传输
  • 网页向插件进行信息传输
  • 与原生应用进行消息传递

2. 消息传递 API

  • runtime API
    • runtime.sendMessage()
    • runtime.onMessage.addListener()
    • runtime.connect()
    • runtime.onConnect.addListener()
    • runtime.onMessageExternal
    • runtime.onConnectExternal
  • tabs API
    • tabs.sendMessage()
    • tabs.connect()

3. 消息传递 API 类别

  • 一次性请求
    • sendMessage
  • 长期连接(允许发送多条消息)
    • connect

二、chrome 字段展示

1. Action chrome 字段包含内容

  1. Action chrome 内容
    共 13 个
    'loadTimes', 'csi', 'action', 'dom', 'extension', 'i18n', 'management', 'permissions', 'runtime', 'scripting', 'storage', 'tabs', 'windows'

在这里插入图片描述

  1. Chrome.runtime 内容
    共 35 个:

'id','onRestartRequired','onUserScriptMessage','onMessageExternal','onMessage','onUserScriptConnect','onConnectExternal','onConnect','onBrowserUpdateAvailable','onUpdateAvailable','onSuspendCanceled','onSuspend','onInstalled','onStartup','connect','getBackgroundPage','getContexts','getManifest','getPackageDirectoryEntry','getPlatformInfo','getURL','openOptionsPage','reload','requestUpdateCheck','restart','restartAfterDelay','sendMessage','setUninstallURL','ContextType','OnInstalledReason','OnRestartRequiredReason','PlatformArch','PlatformNaclArch','PlatformOs','RequestUpdateCheckStatus'

在这里插入图片描述

2. Background chrome 字段包含内容

  1. Background chrome 内容

共 13 个
'loadTimes', 'csi', 'action', 'dom', 'extension', 'i18n', 'management', 'permissions', 'runtime', 'scripting', 'storage', 'tabs', 'windows'

在这里插入图片描述

  1. Chrome.runtime 内容
    共 34 个

'id', 'onRestartRequired', 'onUserScriptMessage', 'onMessageExternal', 'onMessage', 'onUserScriptConnect', 'onConnectExternal', 'onConnect', 'onBrowserUpdateAvailable', 'onUpdateAvailable', 'onSuspendCanceled', 'onSuspend', 'onInstalled', 'onStartup', 'connect', 'getContexts', 'getManifest', 'getPlatformInfo', 'getURL', 'openOptionsPage', 'reload', 'requestUpdateCheck', 'restart', 'restartAfterDelay', 'sendMessage', 'setUninstallURL', 'ContextType', 'OnInstalledReason', 'OnRestartRequiredReason', 'PlatformArch', 'PlatformNaclArch', 'PlatformOs', 'RequestUpdateCheckStatus', 'getBackgroundClient'

在这里插入图片描述

3. Content script chrome 内容

  1. Content script chrome 内容

共 7 个
'csi','dom','extension','i18n','loadTimes','runtime','storage'
在这里插入图片描述

  1. Chrome.runtime 内容

共 14 个
'id', 'onMessage', 'onConnect', 'ContextType', 'OnInstalledReason', 'OnRestartRequiredReason', 'PlatformArch', 'PlatformNaclArch', 'PlatformOs', 'RequestUpdateCheckStatus','connect','getManifest','getURL','sendMessage'

在这里插入图片描述

通过上图可以看出不同的模块中的 chrome 字段包含的内容不一样,不同的 runtime 字段包含的内容也不一样,但是都有 sendMessage 可以进行消息发送

三、消息传递示例

1. Action(popup)background(service worker) 之间的通信

1.1. 在 popup 中的 index.js 中添加点击事件,进行消息发送
  • popup 中使用 chrome.runtime.sendMessage 进行消息发送
plugin_search_but.onclick = function () {chrome.runtime.sendMessage({action: 'fromPopup',message: 'Hello from Popup!'});
}
1.2. 在 service_worker.js 中接收消息
  • service_worker 中使用 chrome.runtime.onMessage.addListener 进行消息监听,通过 .action 来判断来源
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {if (message.action === 'fromPopup') {chrome.notifications.create({type: "basic",title: "Notifications Title",message: "Notifications message to display",iconUrl: "../icons/icon.png"},(notificationId) => {console.log('notificationId-->', notificationId)});}
});
1.3. 消息中心消息弹出

在这里插入图片描述

2. Content scriptbackground(Service Worker) 通信

2.1. 在 content_scripts 中添加点击事件进行消息发送
  • content_scripts 中使用 chrome.runtime.sendMessage 进行消息发送
$('#contentBut').click(async (e) => {// 发送消息chrome.runtime.sendMessage({action: "fromContent"});
})
2.2. 在 Service_worker.js 里面进行消息接收
  • service_worker 中使用 chrome.runtime.onMessage.addListener 进行消息监听,通过 .action 来判断来源
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {if (message.action === 'fromContent') {chrome.notifications.create({type: "basic",title: "Notifications Title",message: "Notifications message to display",iconUrl: "../icons/icon.png"},(notificationId) => {console.log('notificationId-->', notificationId)});}
});
2.3. 消息中心弹出

在这里插入图片描述

3. Action(popup)content 通信

因为 content 是注入页面的脚本,所以和 content 通信,需要获取当前 tab 信息

1. 获取当前 tab 信息
// 以豆瓣举例
const [tab] = await chrome.tabs.query({url: ["https://movie.douban.com/*"],active: true,currentWindow: true
});
console.log('tab', tab)

在这里插入图片描述

2. popupcontent 发送消息,content 接收消息
2.1 popup 中使用 chrome.tabs.sendMessage 发送消息,content 中使用 chrome.runtime.onMessage.addListener 接收消息
  1. popup 代码
plugin_search_but.onclick = async function () {const [tab] = await chrome.tabs.query({url: ["https://movie.douban.com/*"],active: true,currentWindow: true});console.log('tab', tab)if (tab) {// 使用 chrome.tabs.sendMessage 发送消息chrome.tabs.sendMessage(tab.id, {action: 'fromPopup2Content'})}
}
  1. content 使用 chrome.runtime.onMessage.addListener 进行消息监听
chrome.runtime.onMessage.addListener((e) => {console.log('e', e)
})
  1. 控制台输出

在这里插入图片描述

2.2 popup 中使用 chrome.tabs.connect 发送消息,content 使用 chrome.runtime.onConnect.addListener 来接收消息
  1. popup 代码
plugin_search_but.onclick = async function () {const [tab] = await chrome.tabs.query({url: ["https://movie.douban.com/*"],active: true,currentWindow: true});console.log('tab', tab)if (tab) {const connect = chrome.tabs.connect(tab.id, {name: 'fromPopup2Content'});console.log('connect', connect)connect.postMessage('这里是弹出框页面,你是谁?')connect.onMessage.addListener((mess) => {console.log(mess)})}
}
  1. content 中使用 chrome.runtime.onConnect.addListener 进行消息监听
chrome.runtime.onConnect.addListener((res) => {console.log('contentjs中的 chrome.runtime.onConnect:',res)if (res.name === 'fromPopup2Content') {res.onMessage.addListener(mess => {console.log('contentjs中的 res.onMessage.addListener:', mess)res.postMessage('哈哈哈,我是contentjs')})}
})
  1. 日志输出

content 页面日志输出

在这里插入图片描述

popup 页面日志输出

在这里插入图片描述

4. 与其他插件进行通信

4.1. 如需监听传入请求和来自其他插件的连接,需使用 runtime.onMessageExternalruntime.onConnectExternal 方法
// 一次性请求
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {if (sender.id === blocklistedExtension)return;  // don't allow this extension accesselse if (request.getTargetData)sendResponse({targetData: targetData});else if (request.activateLasers) {var success = activateLasers();sendResponse({activateLasers: success});}
});
// 长期连接
chrome.runtime.onConnectExternal.addListener(function(port) {port.onMessage.addListener(function(msg) {// See other examples for sample onMessage handlers.});
});
4.2. 要向其他插件发送消息,需要其他插件的 ID
// 插件 ID
var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";// 一次性请求
chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},function(response) {if (targetInRange(response.targetData))chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});}
);// 长期请求
var port = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);

5. 网页给插件发送消息

插件也可以接收和响应来自其他网页的消息,但无法向网页发送消息

5.1. 插件配置
  • 如需从网页向插件发送消息,需要在 manifest.json 中使用 "externally_connectable" 指定要与哪些网站通信
  • 这会将 Messaging API 公开给指定的网址格式匹配的任何页面
  • 网址格式必须包含至少一个“二级网域”;也就是说,不支持 *、*.com、*.co.uk 和 *.appspot.com 等主机名格式
  • 也可以使用 <all_urls> 访问所有网域
{"externally_connectable": {"matches": ["https://*.douban.com/*"]}
}
5.2. 网页向插件发送消息
  • 使用 runtime.sendMessage()runtime.connect() API 向特定应用或插件发送消息
  • 需要指定插件 ID
5.2.1 Web 页面
  • 使用 runtime.sendMessage()runtime.connect() API 向特定应用或插件发送消息
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
function(response) {if (!response.success)handleError(url);
});
5.2.2 service-worker.js 页面
  • 使用 runtime.onMessageExternalruntime.onConnectExternal API 监听网页中的消息
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {if (sender.url === blocklistedWebsite) // 当 URL 等于设置的 blocklistedWebsite 时return;if (request.openUrlInEditor)openUrl(request.openUrlInEditor);
});

6. 原生消息传递

插件可以使用与其他消息传递 API 类似的 API 与原生应用交换消息,支持此功能的原生应用必须注册可与插件进行通信的原生消息传递主机。Chrome 会在单独的进程中启动主机,并使用标准输入和标准输出流与其进行通信

6.1. 原生消息传递主机配置文件

如需注册原生消息传递主机,应用必须保存一个定义原生消息传递主机配置的文件,示例如下:

{"name": "com.my_company.my_application","description": "My Application","path": "C:\\Program Files\\My Application\\chrome_native_messaging_host.exe","type": "stdio","allowed_origins": ["chrome-extension://knldjmfmopnpolahpmmgbagdohdnhkik/"]
}

JSON 文件必需包含以下字段

  • name:原生消息传递主机的名称,客户端将此字符串传递给 runtime.connectNative()runtime.sendNativeMessage()
    • 此名称只能包含小写字母数字字符下划线和英文句号
  • description:应用说明
  • path:二进制文件的路径
  • type:接口类型
    • stdio
    • stdin
    • stdout
  • allowed_origins:插件 ID 列表
6.2. 连接到原生应用

向原生应用收发消息与跨插件消息传递非常相似。主要区别在于,使用的是 runtime.connectNative() 而非 runtime.connect(),使用的是 runtime.sendNativeMessage() 而不是 runtime.sendMessage()

需要在权限中声明 nativeMessaging 权限

service_worker.js 中进行消息监听和消息发送

  1. 使用 connectNative
var port = chrome.runtime.connectNative('com.my_company.my_application');
port.onMessage.addListener(function (msg) {console.log('Received' + msg);
});
port.onDisconnect.addListener(function () {console.log('Disconnected');
});
port.postMessage({text: 'Hello, my_application'});
  1. 使用 sendNativeMessage
chrome.runtime.sendNativeMessage('com.my_company.my_application',{text: 'Hello'},function (response) {console.log('Received ' + response);}
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/771398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML作业2

作业1: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>table…

【实验室塑料器皿】耐受强酸强碱特氟龙量具PFA量筒量杯适用于半导体新材料

PFA量筒为上下等粗的直筒状&#xff0c;特氟龙量杯是上大下小的圆台形&#xff0c;底座均有宽台设计&#xff0c;保证稳定性&#xff0c;两者均可在实验室中作为定量量取液体的量具&#xff0c;上沿一侧有弧嘴设计&#xff0c;便于流畅地倾倒液体。 规格参考&#xff1a;5ml、…

P3919 【模板】可持久化线段树 1(可持久化数组)

题目描述 如题&#xff0c;你需要维护这样的一个长度为 N 的数组&#xff0c;支持如下几种操作 在某个历史版本上修改某一个位置上的值 访问某个历史版本上的某一位置的值 此外&#xff0c;每进行一次操作&#xff08;对于操作2&#xff0c;即为生成一个完全一样的版本&…

curl在window及linux中的使用及区别

目录 内容介绍 测试一&#xff08;GET,application/json&#xff09; 归纳 测试二&#xff08;GET,x-www-form-urlencoded&#xff09; 归纳 测试三&#xff08;POST,FORM-DATA&#xff09; 归纳 测试四&#xff08;POST,x-www-form-urlencoded&#xff09; 归纳 总结…

yolov5交互式界面 V5.0-6.0版本通用界面-yolo-pyqt-gui(通用界面制作+代码)

往期热门博客项目回顾&#xff1a; 计算机视觉项目大集合 改进的yolo目标检测-测距测速 路径规划算法 图像去雨去雾目标检测测距项目 交通标志识别项目 yolo系列-重磅yolov9界面-最新的yolo 姿态识别-3d姿态识别 深度学习小白学习路线 yolo GUI OYQT界面 YOLOv5…

pycharm连接服务器运行时找不到文件或目录

选择你要修改的python interpreter 进入下图界面&#xff0c;默认选择的是Deployment configuration,需要将其改成SSH。 再将上图python interpreter path和pycharm helpers path 配置成服务器上相应地址即可。 over

校园跑腿小程序源码系统多校园版 跑腿达人入驻接单 带完整的安装代码包以及系统部署教程

在数字化时代的浪潮中&#xff0c;校园生活的便捷性和高效性成为了广大师生的共同追求。为了满足这一需求&#xff0c;罗峰给大家分享一款适用于多校园的跑腿小程序源码系统——校园跑腿小程序源码系统多校园版。该系统不仅提供了完整的安装代码包&#xff0c;还附带了详尽的系…

用指针处理链表(一)

1链表概述 链表是一种常见的重要的数据结构。它是动态地进行存储分配的一种结构。我们知道,用数组存放数据时,必须事先定义固定的长度(即元素个数)。比如,有的班级有100人&#xff0c;而有的班只有30人&#xff0c;如果要用同一个数组先后存放不同班级的学生数据,则必须定义长度…

男青年穿什么裤子好看?适合男生穿的百搭神裤

这几年衣服的款式可谓是越来越多了&#xff0c;很多男生在选裤子的时候都发现虽然款式越来越多&#xff0c;但现在市面上的裤子质量参差不齐&#xff0c;导致难以选择。而且还有很多商家为了利润采用低廉的材料&#xff0c;从而上身舒适性极差。 那么今天就给大家详细介绍几点…

3D软件坐标系速查

本文介绍不同3D软件的世界坐标系之间的差异及其工作原理。 基本上&#xff0c;游戏引擎和3D软件包最重要的问题是根据软件的坐标轴系统创建资产&#xff0c;正确缩放它们并根据要完成的工作设置枢轴系统。 坐标系正确性的定义可能会根据模型导入的游戏引擎或 3D 软件而变化。…

开放式耳机性价比高的品牌有哪些呢?五大高性价比选购清单

不入耳开放式蓝牙耳机近两年开始火起来了&#xff0c;因为它佩戴的舒适性和安全性两方面受到了很多人的关注。开放式的设计&#xff0c;就算不放进耳朵里也能听歌&#xff0c;同时加上它独特的空气传导的传声途径&#xff0c;整体的音质还是很不错的。不压耳&#xff0c;不涨耳…

2016年认证杯SPSSPRO杯数学建模D题(第二阶段)NBA是否有必要设立四分线全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 D题 NBA是否有必要设立四分线 原题再现&#xff1a; NBA 联盟从 1946 年成立到今天&#xff0c;一路上经历过无数次规则上的变迁。有顺应民意、皆大欢喜的&#xff0c;比如 1973 年在技术统计中增加了抢断和盖帽数据&#xff1b;有应运而生、力…

通过MobaXterm工具远程连接可视化服务器桌面并操控

目录 一、MobaXterm工具二、MobaXterm工具可视化服务器目录三、MobaXterm工具可视化服务器桌面 一、MobaXterm工具 MobaXterm是一款功能强大的远程连接工具&#xff0c;可以用于连接到各种类型的服务器&#xff0c;包括Linux、Windows和MacOS。它支持多种协议&#xff0c;包括…

【C语言】linux内核pci_enable_device函数和_PCI_NOP宏

pci_enable_device 一、注释 static int pci_enable_device_flags(struct pci_dev *dev, unsigned long flags) {struct pci_dev *bridge;int err;int i, bars 0;/** 此时电源状态可能是未知的&#xff0c;可能是由于新启动或者设备移除调用。* 因此获取当前的电源状态&…

【Java】哈希表

文章目录 一、概念二、哈希冲突2.1概念2.2设计合理的哈希函数-避免冲突2.3调节负载因子-避免冲突2.4闭散列-冲突解决&#xff08;了解&#xff09;2.5开散列/哈希桶-冲突解决&#xff08;重点掌握&#xff09; 三、代码实现3.1成员变量及方法的设定3.2插入3.3重新哈希3.4 获取到…

YT8531调试记录

总结 还是从设备树&#xff0c;mac驱动&#xff0c;mac驱动对mdio总线的注册&#xff0c;phy驱动 &#xff0c;phy的datasheet&#xff0c;cpu的datasheet 几个方面来看来看 0.确认供电&#xff0c;以及phy的地址(一般会有多个地址&#xff0c;根据相关引脚电平可配置) 1.确…

第二十九天-Flask框架web开发

目录 1.介绍 2.安装 虚拟环境安装 3.使用 1.第一个Flask程序 2.MTV模式 3.启动选项以及调试 启动 调试模式 Pycharm启动配置 4.Flask的扩展 5.url配置和路由 6.响应上下文对象 ​编辑7.请求保报文常用参数 8.响应报文 9.重定向等内部视图 1.介绍 网址&#xff1…

BEVFormer v2论文阅读

摘要 本文工作 提出了一种具有透视监督&#xff08;perspective supervision&#xff09;的新型鸟瞰(BEV)检测器&#xff0c;该检测器收敛速度更快&#xff0c;更适合现代图像骨干。现有的最先进的BEV检测器通常与VovNet等特定深度预训练的主干相连&#xff0c;阻碍了蓬勃发展…

Diffuison在域自适应中 笔记

1 Title Diffusion-based Target Sampler for Unsupervised Domain Adaptation&#xff08;Zhang, Yulong, Chen, Shuhao, Zhang, Yu, Lu, Jiang&#xff09;【CVPR 2023】 2 Conclusion large domain shifts and the sample scarcity in the target domain make exis…

LeetCode:2642. 设计可以求最短路径的图类(SPFA Java)

目录 2642. 设计可以求最短路径的图类 题目描述&#xff1a; 实现代码与解析&#xff1a; SPFA 原理思路&#xff1a; 2642. 设计可以求最短路径的图类 题目描述&#xff1a; 给你一个有 n 个节点的 有向带权 图&#xff0c;节点编号为 0 到 n - 1 。图中的初始边用数组 e…