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

2024-03-27 08:52
文章标签 模块 插件 之间 chrome 消息传递

本文主要是介绍Chrome 插件各模块之间的消息传递，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

一、消息传递

1. 消息传递分类

  • Chrome 插件的 Action、Background 和 content_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 script 和 background（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. popup 向 content 发送消息，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.onMessageExternal 或 runtime.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.onMessageExternal 或 runtime.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);}
);

这篇关于Chrome 插件各模块之间的消息传递的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/851572。

相关文章

iptables(7)扩展模块state

iptables(7)扩展模块state

简介         前面文章我们已经介绍了一些扩展模块，如iprange、string、time、connlimit、limit，还有扩展匹配条件如--tcp-flags、icmp。这篇文章我们介绍state扩展模块  state          在 iptables 的上下文中，--state 选项并不是直接关联于一个扩展模块，而是与 iptables 的 state 匹配机制相关，特
阅读更多...
python 在pycharm下能导入外面的模块，到terminal下就不能导入

python 在pycharm下能导入外面的模块，到terminal下就不能导入

项目结构如下，在ic2ctw.py 中导入util，在pycharm下不报错，但是到terminal下运行报错  File "deal_data/ic2ctw.py", line 3, in <module>     import util 解决方案： 暂时方案：在终端下：export PYTHONPATH=/Users/fujingling/PycharmProjects/PSENe
阅读更多...
[FPGA][基础模块]跨时钟域传播脉冲信号

[FPGA][基础模块]跨时钟域传播脉冲信号

clk_a 周期为10ns clk_b 周期为34ns 代码: module pulse(input clk_a,input clk_b,input signal_a,output reg signal_b);reg [4:0] signal_a_widen_maker = 0;reg signal_a_widen;always @(posedge clk_a)if(signal_a)
阅读更多...
WordPress网创自动采集并发布插件

WordPress网创自动采集并发布插件

网创教程：WordPress插件网创自动采集并发布 阅读更新：随机添加文章的阅读数量，购买数量，喜欢数量。 使用插件注意事项 如果遇到404错误，请先检查并调整网站的伪静态设置，这是最常见的问题。需要定制化服务，请随时联系我。 本次更新内容 我们进行了多项更新和优化，主要包括： 界面设置：用户现在可以更便捷地设置文章分类和发布金额。代码优化：改进了采集和发布代码，提高了插件的稳定
阅读更多...
vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

vscode-创建vue3项目-修改暗黑主题-常见错误-element插件标签-用法涉及问题

文章目录 1.vscode创建运行编译vue3项目2.添加项目资源3.添加element-plus元素4.修改为暗黑主题4.1.在main.js主文件中引入暗黑样式4.2.添加自定义样式文件4.3.html页面html标签添加样式 5.常见错误5.1.未使用变量5.2.关闭typescript检查5.3.调试器支持5.4.允许未到达代码和未定义代码 6.element常用标签6.1.下拉列表
阅读更多...
ccp之间是不可以直接进行+，-的，要用ccpSub和ccpAdd。

ccp之间是不可以直接进行+，-的，要用ccpSub和ccpAdd。

1.  http://www.cnblogs.com/buaashine/archive/2012/11/12/2765691.html  上面有好多的关于数学的方面的知识，cocos2dx可能会用到的 2.学到了   根据tilemap坐标得到层上物体的id int oneTiled=flagLayer->tileGIDt(tilePos);
阅读更多...
ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

ROS2从入门到精通4-4：局部控制插件开发案例(以PID算法为例)

目录 0 专栏介绍1 控制插件编写模板1.1 构造控制插件类1.2 注册并导出插件1.3 编译与使用插件 2 基于PID的路径跟踪原理3 控制插件开发案例(PID算法)常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习，掌握ROS2底层基本分布式原理，并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。 🚀详情：《ROS2从入门到精通》 1 控制插
阅读更多...
uniapp 使用uview 插件

uniapp 使用uview 插件

看创建项目版本vue2 、 vue3 Button 按钮 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 1.  npm install uview-ui@2.0.36 2. // main.js，注意要在use方法之后执行import uView from 'uview-ui'Vue.use(uView)// 如此
阅读更多...
1_CString char* string之间的关系

1_CString char* string之间的关系

CString转char*，string string转char*,CString char* 转CString,string 一、CString转char*，string //字串转换测试 CString CString1; std::string string1; CHAR* char1=NULL; //1string1=CString1.GetBuffer();CStri
阅读更多...
【Linux文件系统】被打开的文件与文件系统的文件之间的关联刨析总结

【Linux文件系统】被打开的文件与文件系统的文件之间的关联刨析总结

操作系统管理物理内存以及与外设磁盘硬件进行数据的交换 操作系统如何管理物理内存呢？ 其实操作系统内核先对内存先描述再组织的！操作系统管理内存的基本单位是4KB，操作系统会为每一个4KB大小的物理内存块创建一个描述该4KB内存块的struct page结构体，该结构体存储着这4KB内存块的属性信息，通过管理struct page来对内存进行管理，page结构体的大小比较小，OS通常将它们组成一个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2