#Chrome扩展程序开发教程--07:消息传递

news2024/11/15 7:47:49

#Chrome扩展程序开发教程--07:消息传递

    • 引言
    • 1、基本介绍
    • 2、简单通信
    • 3、长时间通信
    • 4、其它通信
      • 4.1、Cross-extension messaging
      • 4.2、Sending messages from web pages
      • 4.3、Native messaging

引言

        本系列博客旨在带来最新的Chrome扩展程序开发入门教程。


1、基本介绍

        因为 content scripts 是注入到网页中运行的,不能直接和扩展程序其它部分共享环境和变量,所以需要一些方式来与扩展程序的其它部分进行通信。扩展程序中的任何一方都可以监听从另一端发出的消息,并在同一通道上作出回应。消息可以是任何有效的 JSON 对象(null、布尔值、数字、字符串、数组或对象)。

2、简单通信

        简单通讯适用于单次的即时消息发送,chrome.runtime对象中内置了一个消息通道,可以直接发送。从 content scripts 向 service worker 发送消息的代码如下所示:

(async () => {
  const response = await chrome.runtime.sendMessage({greeting: "hello"});
  // do something with response here, not outside the function
  console.log(response);
})();

        如果需要从 service worker 向 content scripts 发送消息的话,则需要指定 tab 对象:

(async () => {
  const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
  const response = await chrome.tabs.sendMessage(tab.id, {greeting: "hello"});
  // do something with response here, not outside the function
  console.log(response);
})();

        无论接收方是 service worker 或 content scripts ,只需要添加接收消息的监听器即可:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting === "hello")
      sendResponse({farewell: "goodbye"});
  }
);

        但需要注意的是,如果存在多个接收方,那么只有第一个调用 sendResponse 的接收方返回的消息才能被发送方接收。

3、长时间通信

        有些时候,扩展程序中的部分模块之间需要进行长时间稳定通信,此时在用上面那种通信方法就不太合适了。
        以下代码为从 content scripts 向 service worker 发送建立连接请求。其中 connect 的时候可以指定 name 属性,用以区分不同目的和功能的连接。

var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
  if (msg.question === "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question === "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

        如果需要从 service worker 向 content scripts 发送建立连接请求,则需要指定 tab 对象,和简单通信中的做法类似。
        无论接收方是 service worker 或 content scripts ,只需要添加接收连接的监听器即可:

chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name === "knockknock");
  port.onMessage.addListener(function(msg) {
    if (msg.joke === "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer === "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer === "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

        这里面的 port 就是连接的双方用来进行通信的对象,但其中有一些细节需要注意一下:
        当从 service worker 向 content scripts 发送建立连接请求时,若目标 tab 中存在多个 frame ,且 content scripts 注入到了每个 frame 中,则每个 frame 中的 runtime.onConnect 事件都会被触发。同样的,也可能会出现多个 frame 中的 runtime.connect() 一起调用的情况。

4、其它通信

        主要用到的就是上面介绍的两种通信手段,但还存在另外的通信,除非特殊目的,否则不会用到的,因此这里只简单介绍一下:

4.1、Cross-extension messaging

        除了在自己的扩展程序中的不同组件之间进行通信外,还可以使用消息传递 API 与其他扩展程序进行通信。

4.2、Sending messages from web pages

        与 Cross-extension messaging 一样,扩展程序可以接收和响应来自普通网页的消息。

4.3、Native messaging

        扩展程序可以与主机上的应用程序进行通信。

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

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

相关文章

​从底层技术分析如何调教你的ChatGPT?

相信很多人都已经在使用类ChatGPT的工具进行工作或者娱乐了,这里说的类ChatGPT的是指和ChatGPT相同或者相似功能的产品,包括国外的开源平替模型、百度的文心一言等,但是你真的会使用这些工具和应用吗?你使用的方法是正确的吗&…

Java ---内部类

(一)定义 将一个类 A 定义在另一个类 B 里面,里面的那个类 A 就称为 内部类 ( InnerClass ) ,类 B 则称为 外部类( OuterClass )。广泛意义上的内部类一般来说包括这四种&#xff1…

【中级软件设计师】—(针对上午题)软件工程上(三十五)

【中级软件设计师】—(针对上午题)软件工程(三十五) 一、CMM 1 2 3 4 5 二、能力成熟度模型集成(CMMI) 6 7 8 9 三、软件过程模型 (一)、瀑布模型 (二)、V模…

第八章 项目进度管理

项目进度有8个过程 1、规划项目,进度管理(计划) 2、定义活动(活动清单) 3、排序活动 4、估算活动资源(估算人力) 5、估算活动时间 6、制定进度计划表 7、控制进度 规划项目进度管理 为实施项目进…

薪资17K是一个怎样的水平?来看看98年测试工程师的面试全过程…

我的情况 大概介绍一下个人情况,男,本科,三年多测试工作经验,懂python,会写脚本,会selenium,会性能,然而到今天都没有收到一份offer!从年后就开始准备简历,年…

电容的基本知识

1、电容是电路中重要的元件,种类多、用途广,主要有插件类和贴片类两种。 2、电容主要特性参数:标称容量、耐压、误差、温度 2.1电容容量常用单位有微法《uF)、纳法《nF)、皮法《pF) 单位换算:1uF10^3nF10"6pF《电容的基本单位用法拉…

完成近4亿元C轮融资+自研底盘域控,本土线控制动玩家“拼”了

显然,线控制动赛道已经进入白热化竞争阶段。 高工智能汽车研究院监测数据显示,2022年中国市场(不含进出口)乘用车前装搭载线控制动系统(One-Box,Two-Box)上险交付合计497.39万辆,同…

java反序列化 cc链6 分析

前言 这里分析完cc1的两个以后,白日梦佬又介绍了cc6链,最主要的是这个链子不受jdk的版本影响,甚至不受cs版本的影响,这么说就是cs大部分都是可以使用cc链6,而且这个链子要简洁的很多,我一听这个好啊&#x…

springcloud-02

1、微服务概述 1.1 概念 1.2 架构演进 单体架构: 将业务的所有功能集中在一个项目中年开发, 打成一个jar包 优点:架构简单,部署成本低 缺点:耦合度高 分布式架构 按业务功能对系统进行拆分,每一个业务模块…

如何将项目提交到别人的仓库

大纲: 1、在gitee中克隆(clone)别人仓库的代码。 首先,进入别人的仓库,点击 克隆/下载 2、在你存放项目的文件夹下克隆你刚刚复制的代码 (右键点击Git Clone即可) 点击OK 就开始克隆了 克隆成功之后,文件上…

【HuggingGPT】Solving AI Tasks with ChatGPT and its Friends in Hugging Face

文章目录 所解决的问题?背景所采用的方法?取得的效果?问题所出版信息?作者信息?参考链接 所解决的问题? 当前的语言模型Large Language Models (LLMs)缺乏处理复杂信息的能力,像视觉&#xff0…

重学Java设计模式-行为型模式-中介者模式

重学Java设计模式-行为型模式-中介者模式 内容摘自:https://bugstack.cn/md/develop/design-pattern/2020-06-27-重学 Java 设计模式《实战中介者模式》.html#重学-java-设计模式-实战中介者模式「按照mybatis原理手写orm框架-给jdbc方式操作数据库增加中介者场景」…

Maven项目中出现【不再支持目标选项 1.5】的解决办法

1 快速解决【单项目】 本方法只适用于单个项目&#xff0c;新建项目使用maven还会出现问题。 在pom.xml配置&#xff1a; <properties><maven.compiler.source>11</maven.compiler.source><maven.compiler.target>11</maven.compiler.target>&l…

高并发高吞吐IO秘密武器——epoll池化技术

1、epoll函数详解 epoll是Linux特有的IO复用函数&#xff0c;使用一组函数来完成任务&#xff0c;而不是单个函数。 epoll把用户关心的文件描述符上的事件放在内核的一个事件表中&#xff0c;不需要像select、poll那样每次调用都要重复传入文件描述符集或事件集。 epoll需要…

闲人闲谈PS之四十一——重新认识PS模块

惯例闲话&#xff1a;4月份参加了SAP咨询大师乐老师组织的公司间业务培训&#xff0c;印象极为深刻&#xff0c;乐老师从三权分立的角度同大家分析了公司间业务交易对象–库存的属地权、管理权、所有权&#xff0c;通过这种全新的视角&#xff0c;把复杂难以理解的公司交易用最…

万字复盘Vue2相关知识(适合学过但忘了然而需要上手的朋友)

目录 前言一&#xff0c;Vue2项目的创建及基本配置1.1 用脚手架创建项目1.2 项目结构1.3 入口文件main.js1.4 组件配置1.4 运行项目 二&#xff0c;Vue的基础知识2.1 数据显示2.2 数据绑定2.3 事件处理2.4 循环遍历2.5 判断语法2.6 计算属性2.7 监视属性 三&#xff0c;重要的生…

python 资料

算法和设计模式 Python实现算法和设计模式 algorithms - Python的一个算法模块. PyPattyrn - 一个用于实现常见设计模式的简单而有效的库. python-patterns - Python中设计模式的集合. sortedcontainers - 快速&#xff0c;纯Python的SortedList&#xff0c;SortedDict和So…

第1章:算法基础【AcWing】

文章目录 快速排序题目描述输入格式输出格式样例样例输入样例输出 提示 算法&#xff08;分治&#xff0c;双指针&#xff09; O ( n l o g n ) O(nlogn) O(nlogn)示例代码注意事项时间复杂度稳定性 归并排序题目描述算法&#xff08;分治&#xff0c;双指针&#xff09; O (…

数据库系统-索引

一、什么是索引 字典中的目录&#xff0c;就是生活中的索引 **索引&#xff1a;**定义在存储表基Table础之上&#xff0c;有助于无需检查所有记录而快速定位所需记录的一种辅助存储结构&#xff0c;由一些列存储在磁盘上的索引项index etries组成&#xff0c;每一个索引项又由…

诊断报文和通讯报文有什么区别?

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…