chrome extension sendmessage async

news/2024/9/18 21:09:38/ 标签: chrome, 前端, chrome插件, javascript

遇到的问题:
Chrome 插件开发,需要实现 content 页面使用 chrome.runtime.sendMessage 发送消息给 background,background 需要异步处理完消息以后再发送处理结果给content 页面。

解决思路和方法:
google 找到的解决方法:
https://stackoverflow.com/questions/14094447/chrome-extension-dealing-with-asynchronous-sendmessage

  • 关键代码(解决我问题的答案,来自链接网页)
javascript">// content.js
chrome.runtime.sendMessage({ type: "GET_FOO" }, function (response) {console.log(response.foo);
});// background.js
// replace with a real call that
// needs to run asynchronously
async function getFoo() {return "bar"
}async function sendFoo(sendResponse) {const foo = await getFoo()sendResponse({ foo })
}chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if (request.type === "GET_FOO") {sendFoo(sendResponse)return true}}
);
  • 直接使用到我项目里面时,发现还需要修改(为了方便阅读,我直接在上面的代码中进行修改):代码中 getFoo 函数部分,我需要通过 $.ajax 发送一个异步请求,那么直接用 await getFoo() 就达不到效果,使用 promise 把 getFoo 改造一下就可以了。
javascript">// content.js
chrome.runtime.sendMessage({ type: "GET_FOO" }, function (response) {console.log(response.foo);
});// background.js
//reqParams是请求参数
function getFoo(reqParams) {return new Promise((resolve, reject) => {//模拟发送ajax请求结果if (true) {resolve("success")} else {resolve("fail")}});
}async function sendFoo(sendResponse, reqParams) {const foo = await getFoo(reqParams)sendResponse({ foo })
}chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if (request.type === "GET_FOO") {const reqParams = { param1: '1', param2: '2' }sendFoo(sendResponse, reqParams)return true}}
);

这些是解决问题的思路,重点是:

  • chrome.runtime.onMessage.addListener 中 return true
  • 使用JS异步函数技术编写相关代码

http://www.ppmy.cn/news/1518521.html

相关文章

快速掌握GPTEngineer:用AI创建网页应用的实用教程

今天来聊聊一个非常有趣的工具——GPTEngineer。这是一个基于AI的网页开发平台,特别适合那些不熟悉编程但又想快速创建网页应用的人。如果你想用简单的文本描述来生成一个网站或者应用,GPTEngineer可能就是你需要的。我们一步步看看如何使用它。 1. 了解…

DSP48E2使用以及FIR滤波器定点设计实现与优化

DSP48E2使用以及FIR滤波器定点设计实现与优化 DSP48E2是数字信号处理中最常用的FPGA硬核资源,对于高效率,低消耗实现数字信号处理算法有着极为重要的意义。因此熟练掌握DSP48E2的使用是算法工程化的必备技能。FIR滤波器是因果系统,只有零点没…

Spring Boot 项目中,配合 Nacos 、Gateway使用 MinIO

在现代微服务架构中,将不同服务整合并高效地管理配置和流量是至关重要的。Spring Cloud Gateway、Nacos 和 MinIO 是三个关键组件,它们可以一起工作,提供一个灵活、动态和高效的解决方案。下面的方案展示了如何将这三个组件结合起来&#xff…

Nginx: https解决安全问题

https原理 1 )http协议存在的问题 数据使用明文传输,可能被黑客窃取 (需要信息加密)报文的完整性无法验证,可能被黑客篡改 (需要完整性校验)无法验证通信双方的身份,可能被黑客伪装 (需要身份认证) 2 ) https 原理 所谓 https,…

【前端面试基础】计算机网络、浏览器、操作系统

计算机网络 一、网络协议与模型 什么是协议? 协议是指计算机系统中完成特定任务所必需的规则和约定,特别是数据传输和交换的规则和约定。OSI和TCP/IP是什么? OSI(开放式系统互连参考模型)是一种网络架构模型&#xf…

黑神话悟空-妖怪平生录PDF

通关黑神话悟空,并且解锁了两个结局。感触不是那么深,我个人的感觉是剧情上面不如国产单机古剑奇谭三。 与其说黑神话悟空是西游记的延续,不如说是游科CEO对斗战神的执念。 不过,这里面的游记是真的很惊艳,203个妖怪…

Openai api via azure error: NotFoundError: 404 Resource not found

题意:"OpenAI API通过Azure出错:NotFoundError: 404 找不到资源" 问题背景: thanks to the university account my team and I were able to get openai credits through microsoft azure. The problem is that now, trying to us…

Zookeeper官网Java示例代码解读(一)

2024-08-22 1. 基本信息 官网地址: https://zookeeper.apache.org/doc/r3.8.4/javaExample.html 示例设计思路 Conventionally, ZooKeeper applications are broken into two units, one which maintains the connection, and the other which monitors data. I…

c-数据结构(顺序表、链表)

概念 对于n各元素的线性表,严格数学定义:其中任意一个数据元素a[i],有且仅有一个前驱a[i-1],有且仅有一个后继a[i1];首元素a[0]无前驱,尾元素a[n-1]无后继。 顺序表 属于线性表,数据之间的空…

在 Java 中使用泛型时遇到的问题,,无法正确将响应数据映射为需要的数据

public <T> List<T> getOrderList(String shopId, Class<T> tClass) {// --- 省略一些中间过程----ParameterizedTypeReference<KeRuYunCommonResultVO<KPOSPageResultVO<T>>> responseType new ParameterizedTypeReference<KeRuYunCom…

Python日志,按日期分割日志文件(每天一个新的日志文件)

为了创建一个Python类来管理日志&#xff0c;并使其支持按日期分割日志文件&#xff08;每天一个新的日志文件&#xff09;&#xff0c;你可以使用Python标准库中的logging模块和logging.handlers.TimedRotatingFileHandler。下面是一个简单的示例&#xff0c;展示了如何实现这…

linux怎么安装Android Studio

方法一 下载安装包到linux系统解压 tar.gz文件的解压方式为 tar -zxvf 文件名&#xff08;tar -zxvf filename.tar.gz 命令的作用是&#xff0c;使用gzip解压缩&#xff08;-z&#xff09;&#xff0c;解包&#xff08;-x&#xff09;名为filename.tar.gz的归档文件&#xf…

使用PostgreSQL的CLI客户端查询数据不显示问题

问题 今天在使用PostgreSQL的命令行工具&#xff08;CLI&#xff09;查询数据时&#xff0c;数据不显示问题。 解决 使用CLI客户端登录数据库后&#xff0c;需要设置打印&#xff0c;设置边框为2: peterlocalhost testdb> \pset border 2或者&#xff0c;使用元组方式显…

clerk中authenticateWithRedirect方法讲解

clerk.authenticateWithRedirect 主要用于处理 Clerk 的 OAuth 登录过程&#xff0c;其工作流程大致如下&#xff1a; 1、用户发起登录请求&#xff1a; 用户点击登录按钮&#xff0c;触发 OAuth 登录流程。 2、重定向到 OAuth 提供商&#xff1a; clerk.authenticateWithRed…

回溯法-0/1背包问题

什么是回溯法&#xff1f; 回溯法是一种搜索算法&#xff0c;它通过深度优先搜索的方式来解决决策问题。它从根节点开始&#xff0c;逐步扩展节点&#xff0c;直到找到所有可能的解。 回溯法的基本思想 开始节点&#xff1a;从根节点出发&#xff0c;这个节点是解空间的起点…

word文档转html(只支持段落和表格)

maven依赖<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>5.2.3</version> </dependency> import org.apache.poi.xwpf.usermodel.*;import java.io.*;public class Wor…

基于Java+SpringMvc+Vue求职招聘系统详细设计实现

基于JavaSpringMvcVue求职招聘系统详细设计实现 &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &…

【60天备战软考高级系统架构设计师——第三天:软件工程原则与常用方法】

开篇 软件工程的原则和方法指导开发团队在项目中组织和管理代码及架构。这些原则和方法可以帮助团队提高软件的可维护性和可扩展性。今天&#xff0c;我将重点介绍软件工程中的一些基本原则以及常用方法和工具&#xff0c;帮助大家更好地应对实际开发中的挑战。 软件工程的基…

【Spring Boot 3】【Web】配置HTTPS

【Spring Boot 3】【Web】配置HTTPS 背景介绍开发环境开发步骤及源码工程目录结构背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花费或多或…

【Android】UIMode

要修改 Android 设备的 UiMode&#xff08;用户界面模式&#xff09;&#xff0c;可以使用 UiModeManager 类进行设置。不同的 UI 模式适用于不同的使用场景&#xff0c;比如夜间模式、汽车模式等。下面是一些常见的修改方法&#xff1a; 1. 修改夜间模式 夜间模式可以通过 U…