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

news2024/11/18 14:42:12

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 access
  else 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);
  }
);

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

文件操作函数

文件操作函数

目录 前言 一、顺序读写函数 1、fgetc 和 fputc 2、fgets 和 fputs 3、fprintf 和 fscanf 4、sscanf 和 sprintf 5、fwrite 和 fread 二、随机读写函数 1、fseek 2、ftell 3、rewind 前言 本章我们学习一下文件操作相关的各种函数 一、顺序读写函数 1、fgetc 和 fpu…
阅读更多...
【小黑送书—第十四期】＞＞重磅升级——《Excel函数与公式应用大全》(文末送书）

【小黑送书—第十四期】＞＞重磅升级——《Excel函数与公式应用大全》(文末送书）

今天给大家带来AI时代系列书籍&#xff1a;《Excel 2019函数与公式应用大全》全新升级版&#xff0c;Excel Home多位微软全球MVP专家打造&#xff0c;精选Excel Home海量案例&#xff0c;披露Excel专家多年研究成果&#xff0c;让你分分钟搞定海量数据运算&#xff01; 由北京…
阅读更多...
C语言数据结构基础————二叉树学习笔记（四）简单的OJ题目练习

C语言数据结构基础————二叉树学习笔记（四）简单的OJ题目练习

1.单值二叉树 965. 单值二叉树 - 力扣&#xff08;LeetCode&#xff09; 建立一个新的函数&#xff0c;用函数传参的方法来记录val的值 如上一篇最后的对称二叉树的习题&#xff0c;建立新的函数来传参 多采用使用反对值的方法&#xff0c;因为如果是相等return true的话&am…
阅读更多...
单臂路由和三层交换机

单臂路由和三层交换机

目录 一.单臂路由 1.单臂路由的工作原理 2.单臂路由的配置 2.1画出拓扑图 2.2配置PC 2.3配置交换机 2.4配置路由器 2.5测试 二.三层交换机 1.三层交换机的概述 2.三层交换机的配置 2.1画出拓扑图 2.2配置PC 2.3配置二层交换机 2.4配置三层交换机 2.5测试 3.拓展 三.总结 一.…
阅读更多...
基于nodejs+vue学院个人信息管理系统python-flask-django-php

基于nodejs+vue学院个人信息管理系统python-flask-django-php

随着社会的发展&#xff0c;学院个人信息的管理形势越来越严峻。越来越多的用户利用互联网获得信息&#xff0c;但学院个人信息鱼龙混杂&#xff0c;信息真假难以辨别。为了方便用户更好的获得学院个人信息&#xff0c;因此&#xff0c;设计一种安全高效的学院个人信息管理系统…
阅读更多...
C语言中其他运算符介绍

C语言中其他运算符介绍

除了算术运算符和位运算符外&#xff0c;C语言还提供了一些其他类型的运算符&#xff0c;包括逗号运算符、条件运算符、sizeof运算符、指针运算符等。这些运算符在C语言中具有特定的功能和用途&#xff0c;对于编写复杂的程序和实现各种算法非常有用。本文将深入介绍C语言中的这…
阅读更多...
设计模式之抽象工厂模式精讲

设计模式之抽象工厂模式精讲

概念&#xff1a;为创建一组相关或相互依赖的对象提供一个接口&#xff0c;而且无须指定他们的具体类。 抽象工厂模式是工厂方法模式的升级版本。在存在多个业务品种或分类时&#xff0c;抽象工厂模式是一种更好的解决方式。 抽象工厂模式的UML类图如下&#xff1a; 可以看…
阅读更多...
【Python】搭建 Python 环境

【Python】搭建 Python 环境

目 录 一.安装 Python二.安装 PyCharm 要想能够进行 Python 开发&#xff0c;就需要搭建好 Python 的环境 需要安装的环境主要是两个部分&#xff1a; 运行环境: Python开发环境: PyCharm 一.安装 Python (1) 找到官方网站 (2) 找到下载页面 选择 “Download for Windows”…
阅读更多...
TS函数类型

TS函数类型

函数类型表达式 function hello(x: string) {console.log(x) } //greeter函数的参数是一个函数fn&#xff0c;fn也有一个string类型参数&#xff0c;无返回值。 function greeter(fn: (a: string) > void) {fn(hello) } greeter(hello)也可以把定义参数类型的语句单独提取出…
阅读更多...
【Java程序设计】【C00376】基于（JavaWeb）Springboot的社区帮扶对象管理系统（有论文）

【Java程序设计】【C00376】基于（JavaWeb）Springboot的社区帮扶对象管理系统（有论文）

【C00376】基于&#xff08;JavaWeb&#xff09;Springboot的社区帮扶对象管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;已经做了六年的毕业设计程序开发&am…
阅读更多...
SD-WAN海外专线：全球企业网络的增强利器

SD-WAN海外专线：全球企业网络的增强利器

企业在全球范围内建立高效、安全的网络连接至关重要。云桥通SD-WAN海外专线是一种先进的网络解决方案&#xff0c;正在受到越来越多企业的青睐。 提升网络性能和稳定性 SD-WAN海外专线结合了SD-WAN和专用专线服务的优势&#xff0c;能够显著提高网络性能和稳定性。通过智能路由…
阅读更多...
Spring Cloud四：微服务治理与安全

Spring Cloud四：微服务治理与安全

Spring Cloud一&#xff1a;Spring Cloud 简介 Spring Cloud二&#xff1a;核心组件解析 Spring Cloud三&#xff1a;API网关深入探索与实战应用 文章目录 一、服务注册中心的选型与最佳实践1. 主流服务注册中心概述2. 最佳实践建议(1)、选型建议(2)、高可用性与稳定性1). 高可…
阅读更多...
哪些属于“法律、行政法规另有规定，依照其规定进行评估/批准”的情况？

哪些属于“法律、行政法规另有规定，依照其规定进行评估/批准”的情况？

哪些属于“法律、行政法规另有规定&#xff0c;依照其规定进行评估/批准”的情况&#xff1f; 除《网络安全法》《数据安全法》和《个人信息保护法》确立的数据和网络安全整体体系外&#xff0c;企业还应当考虑其他相关法律法规的要求。 例如&#xff1a; ✮如根据《中华人民…
阅读更多...
【 yolo红外微小无人机-直升机-飞机-飞鸟目标检测】

【 yolo红外微小无人机-直升机-飞机-飞鸟目标检测】

yolo无人机-直升机-飞机-飞鸟目标检测 1. 小型旋翼无人机目标检测2. yolo红外微小无人机-直升机-飞机-飞鸟目标检测3. yolo细分类型飞机-鸟类-无人机检测4. yolo红外大尺度无人机检测5. 小型固定翼无人机检测6. 大型固定翼无人机检测7. yolo航空俯视场景下机场飞机检测 1. 小型…
阅读更多...
js逆向之实例某宝热卖(MD5)爬虫

js逆向之实例某宝热卖(MD5)爬虫

目录 正常写 反爬 逆向分析 关键字搜索 打断点&分析代码 得出 sign 的由来 确定加密方式 写加密函数了 补全代码 免责声明:本文仅供技术交流学习,请勿用于其它违法行为. 正常写 还是老规矩,正常写代码,该带的都带上,我这种方法发现数据格式不完整. 应该后面也是大…
阅读更多...
这些好玩的Ai网站你不知道我真的会哭

这些好玩的Ai网站你不知道我真的会哭

你可能想不到&#xff0c;AI已经发展到了这个程度。。文末提供 AI绘画关键词哦 目录 1.Midjourney 2.DeepFakes 3.StyleGAN 4.Runway AI绘画关键词哦 1.Midjourney Midjourney 是一款工具&#xff0c;更像是一位魔术师&#xff0c;但它的魔法来自人工智能技术的神奇。…
阅读更多...
C语言中位运算介绍

C语言中位运算介绍

在C语言中&#xff0c;位运算是一种对二进制位进行操作的运算方式&#xff0c;它可以对数据的二进制表示进行位级别的操作&#xff0c;包括按位与、按位或、按位异或、按位取反等。位运算常用于处理底层数据结构、优化代码性能以及实现各种算法。本文将深入介绍C语言中的位运算…
阅读更多...
从汇编以及栈帧层面理解内联函数的原理

从汇编以及栈帧层面理解内联函数的原理

宏太复杂&#xff0c;所以弄出内联&#xff0c;内联适合小函数&#xff0c;把函数连到程序里面&#xff0c;这样就直接用&#xff0c;不需要调用&#xff0c;但是它占用空间。 C推荐 const和enum替代宏常量 inline去替代宏函数 宏缺点&#xff1a; 1、不能调试 2、没有类型安…
阅读更多...
发现了一本超厉害的英语秘籍，绝对YYDS

发现了一本超厉害的英语秘籍，绝对YYDS

昨天冷月小姐姐分享了一本书&#xff0c;她说是一位英语大神发她的。 我也打开了&#xff0c;很酷炫。 群友们也在与时俱进&#xff0c;随手截图&#xff0c;分享了大模型对文档的理解。 你可能会想&#xff0c;关注宏观经济有啥用&#xff0c;自己只是大海中的浪花一朵。 还有…
阅读更多...
vue+Echarts实现多设备状态甘特图

vue+Echarts实现多设备状态甘特图

目录 1.效果图 2.代码 3.注意事项 Apache ECharts ECharts官网&#xff0c;可在“快速上手”处查看详细安装方法 1.效果图 可鼠标滚轮图表和拉动下方蓝色的条条调节时间细节哦 &#xff08;注&#xff1a;最后一个设备没有数据&#xff0c;所以不显示任何矩形&#xff09;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023