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

news/2024/4/19 19:58:38/

#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 functionconsole.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 functionconsole.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.ppmy.cn/news/48401.html

相关文章

2023-03-18青少年软件编程(C语言)等级考试试卷(四级)解析

2023-03-18青少年软件编程(C语言)等级考试试卷(四级)解析T1、最佳路径 如下所示的由正整数数字构成的三角形: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 从三角形的顶部到底部有很多条不同的路径。对于每条路径,把路径上面的数加起来可以得到一个和,和最大的路径称为最佳路径。你的…

DAY 40 firewalld 防火墙

firewalld防火墙是centos7系统默认的防火墙管理工具,取代了之前的iptables防火墙,也是工作在网络层,属于包过滤防火墙。 支持IPv4、IPv6防火墙设置以及以太网桥支持服务或应用程序直接添加防火墙规则接口拥有两种配置模式:临时模…

CF 607B - Zuma(区间 dp 记忆化搜索写法)

记搜大法好 Zuma 题面翻译 题目描述 Genos最近在他的手机上下载了祖玛游戏。在祖玛游戏里,存在n个一行的宝石,第i个宝石的颜色是Ci 。这个游戏的目标是尽快的消灭一行中所有的宝石。 在一秒钟,Genos能很快的挑选出这些有颜色的宝石中的一个…

c/c++:三维数组,字符数组和字符串,统计字符串中字符出现的频次,scanf输入空格,正则匹配表达式

c/c:三维数组,字符数组和字符串,统计字符串中字符出现的频次,scanf输入空格,正则匹配表达式 2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂不招人,此时学会c的话, 我所知…

[ES6] string 拓展

[ES6] string 拓展 ES6 方法拓展是否包含子串字符串重复字符串补全 字符串普通字符串双引号单引号 模板字符串插入变量和表达式设置输出格式标签模板 ES6 方法拓展 是否包含子串 ES6 之前判断字符串是否包含子串,用 indexOf 方法,ES6 新增了子串的识别…

Kafka中时间轮分析与Java实现

仿kafka实现java版时间轮_java实现时间轮算法_Hekliu的博客-CSDN博客 https://www.cnblogs.com/softlin/p/7426083.html https://blog.csdn.net/happyjacob/article/details/128518700 一、背景 在Kafka中应用了大量的延迟操作但在Kafka中 并没用使用JDK自带的Timer或是Dela…

tf-idf+lda分析多篇文章摘要

import pandas as pd import numpy as np import matplotlib.pyplot as plt #import seaborn as sns plt.rcParams[font.sans-serif] [KaiTi] #指定默认字体 SimHei黑体 plt.rcParams[axes.unicode_minus] False #解决保存图像是负号 import jieba import os # stop_list …

中级软件设计师备考---数据库系统1

目录 数据库模式数据库的设计过程E-R模型关系代数与元组演算 数据库模式 三级模式、两级映射 定义: 三级模式:外模式、概念模式和内模式;两级映射:外模式-概念模式映射、概念模式-内模式映射 外模式是用户看到的数据库的部分 概…

18-java单列集合

java单列集合 1.集合体系结构1.1 单列集合1.2 双列集合 2. 单列集合体系结构3.Collection集合顶层接口3.1 Collection的遍历方法3.1.1 迭代器遍历3.1.2 增强for遍历3.1.3 Lambda表达式 4. List单列集合4.1 List4.1.1 List集合特点4.1.2 List集合的特有方法4.1.3 List集合遍历方…

mysql用户权限与控制

用户管理 1.1 登录MySQL服务器 启动MySQL服务后,可以通过mysql命令来登录MySQL服务器,命令如下: mysql –h hostname|hostIP –P port –u username –p DatabaseName –e “SQL语句” -h参数后面接主机名或者主机IP,hostname为主…

Qt Style Sheets Examples整理

文章目录 样式表用法使用动态属性自定义使用Box模型自定义QPushButton自定义QPushButton的菜单指示子控件复杂选择器完整代码: 特定部件样式表QAbstractScrollAreaQCheckBoxQComboBoxQDockWidgetQFrame QProgressBar QPushButton QSlider完整代码: 原…

C#生成单色bmp图片,转为单色bmp图片 任意语言完全用字节拼一张单色图,LCD取模 其它格式图片转为单色图

最终效果: V1.8.2 20230419 文字生成单色BMP图片4.exe 默认1280*720 如果显示不全,请把宽和高加大 字体加大。 首先,用windows画板生成一张1*1白色单色图作为标准,数据如下: 数据解析参考:BMP图像文件完…

nodejs+vue 智慧餐厅点餐餐桌预订系统

现在社会的生活节奏越来越快,人们对互联网的需求也越来越大,不仅要求使用方便,而且对于功能及扩展性也有了更高的要求,最能达到要求莫过于利用计算机网络,将所需功能要求和计算机网络结合起来,就形成了本智…

【录用案例】1区SCI仅36天录用,新增多本1-2区SCI,CNKI评职好刊发表案例

我处上周(2023年4月8日-2023年4月14日)经核实,由我处Unionpub学术推荐的24篇论文已被期刊部录用、20篇见刊,5篇检索: ✔新增1区纳米与环境类SCI&EI,仅36天录用,录用后17天见刊;…

领域驱动设计(DDD)

目录 领域驱动设计(DDD)架构演进 DDD的几种典型架构 领域驱动设计(DDD)架构演进 IAAS:基础设施服务,Infrastructure-as-a-service。PAAS:平台服务,Platform-as-a-service。SAAS:软件服务,Software-as-a-service。 图架构的演进过程,通过对三个层的举例来进行说明…

ThreadLocal 内存泄露的原因及处理方式

1、ThreadLocal 使用原理 ThreadLocal的主要用途是实现线程间变量的隔离,表面上他们使用的是同一个ThreadLocal, 但是实际上使用的值value却是自己独有的一份。用一图直接表示threadlocal 的使用方式。 从图中我们可以当线程使用threadlocal 时&#xf…

使用MyBatis实现简单查询

文章目录 一,创建数据库与表(一)在Navicat里创建MySQL数据库testdb(二)创建用户表 - t_user(三)在用户表里插入3条记录 二,案例演示MyBatis基本使用(一)创建M…

JavaScript(JS)-1.JS基础知识

1.JavaScript概念 (1)JavaScript是一门跨平台,面向对象的脚本语言,来控制网页行为的,它能使网页可交互 (2)W3C标准:网页主要由三部分组成 ①结构:HTML负责网页的基本结构(页面元素和内容)。 …

[oeasy]python0136_接收输入_input函数_字符串_str

输入变量 回忆上次内容 上次研究了 一行赋值多个变量 a b 5a, b 7, 8 还研究了 标识符的惯用法 python使用的是 snake_case蛇形命名法用下划线 分隔开小写字母的 方法这样就可以 更合理地 命名变量了 变量变量 能变的量我可以 手工输入变量的值 吗?&#x1f9…

解决若依验证码异常:Error: image == null

前言 前两天在改项目突然发现若依的框架可以正常启动但是验证码加载不出来了,一直弹窗提示异常信息,下边是关于问题的描述和解决方案,没有耐心看过程的建议直接滑到最底下看解决方式 问题原因 登录页面一直提示 image null 如图 1 所示&…