当前位置： 首页 > news >正文

chrome扩展在popup、background、content之间通信解决传输文件问题

news 2025/8/31 8:59:09

文章目录

  • 背景介绍
  • 案例介绍
  • 代码示例
    • popup页面，上传文件页面
    • popup页面，js上传代码，file文件转base64
    • background监听消息，base64转file文件，axios上传
  • 附-转base64后直接下载

背景介绍

        示例扩展API版本MV2。
        以弹出窗口（popup）和背景页面（background page）为例。
        在浏览器中，弹出窗口（popup）和背景页面（background page）之间可以通过消息通道进行通信。但是，由于安全限制，弹出窗口不能直接访问背景页面的文件系统或进行文件传输。
        然而，可以使用一些方法来实现弹出窗口向背景页面传输文件，就是在popup页面将文件转为base64的字符串格式向background传输，然后再将base64重新转为file对象，达到传输文件的目的。

案例介绍

        从popup页面选择文件开始上传，触发上传按钮后，获取到选择的文件并将文件传输到background，触发上传接口传输到服务器端，完成文件上传操作。
在这里插入图片描述

代码示例

使用到的js工具有，jquery、axios。

popup页面，上传文件页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>popup</title><style>body {width: 400px;height: 450px;background-color: aliceblue;}.contnet {display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;}.upload_file {display: flex;flex-direction: column;margin-top: 88px;}.upload_btn {border: none;border-radius: 10px;background-color: #4343e0;font-size: 16px;color: white;font-weight: 400;font-family: '微软雅黑';cursor: pointer;}.upload_btn:hover {border: none;border-radius: 10px;background-color: #4343e0;font-size: 16px;color: white;font-weight: 400;font-family: '微软雅黑';cursor: pointer;box-shadow: 0px 0px 0px 1px #848181;}</style>
</head>
<body><div class="contnet"><div class="upload_file"><!--  type: input类型为文件选择类型name: 参数名accept: 上传文件的可选类型--><input id="uploadFile" type="file" name="myFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet|application/vnd.ms-excel" style="margin-bottom: 5px;" /><button id="uploadFileBtn" class="upload_btn" type="button">上传</button></div></div>
</body>
<script type="text/javascript" src="/utils/chrome.js"></script>
<script type="text/javascript" src="/lib/jquery-3.6.3.js"></script>
<script type="text/javascript" src="/popup/popup.js"></script></html>

popup页面，js上传代码，file文件转base64

// popop.js、jquery-3.6.3.js
// 绑定文件上传的button
$("#uploadFileBtn").click(() => {// 如果是单文件上传，选择第一个文件上传//let file = $("#uploadFile")[0].files[0] // oklet file = $("#uploadFile").prop('files')[0]if (!file) {alert('文件上传：' + '请先选择文件')return}let boo = confirm('是否确认上传文件？\n\r 请谨慎操作上传文件')if (boo) {// file转base64let reader = new FileReader()reader.readAsDataURL(file)reader.onload = () => {let base64 = reader.result.split(',')[1]// 发送base64到background// chrome.jssendMessageToBackground({type: 'upload', base64: base64}, (rsp) => {// 上传成功 or 失败后做一些操作})}}
})

background监听消息，base64转file文件，axios上传

// 上传文件
// axios.js
// base64： popup传过来的数据
function uploadFile(base64) {// base64转bloblet blob = base64ToBlob(base64, 'application/vnd.ms-excel')// blob转filelet file = new File([blob], '上传文件的名字[filename].xlsx', {type: 'application/vnd.ms-excel'})// 构造formData表单对象，发起post请求let formatData = new FormData()formatData.append('file', file)// axios发送文件上传的请求return axios({url: 'upload_url',method: 'POST',headers: {'xx-header': 'xxx',// 'Content-Type': 'multipart/form-data' // 不需要设置Content-Type请求头，axios请求机制会自动判断，发起什么样的请求},transformRequest: [(data, headers) => {delete headers['Content-Type']return data}],data: formatData}).then(rsp => {// 服务器数据响应return rsp.data})
}/***	* @param {*} mineType 选择适当的类型来转换base64，并创建Blob二进制对象*  'application/pdf': 表示 PDF 文件类型，可以以可移植文档格式查看和编辑。*  'application/msword' 或 'application/vnd.ms-word': 表示 Word 文档类型，可以以 Microsoft Word 格式查看和编辑。*  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 表示 Word 2007 或更高版本的文件类型，可以以 Office Open XML 格式查看和编辑。*  'application/epub+zip': 表示 ePub 电子书类型，可以以电子书格式查看和编辑。*  'application/vnd.ms-powerpoint' 或 'application/mspowerpoint': 表示 PowerPoint 演示文稿类型，可以以 Microsoft PowerPoint 格式查看和编辑。*  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 表示 PowerPoint 2007 或更高版本的文件类型，可以以 Office Open XML 格式查看和编辑。*  'application/vnd.ms-excel' 或 'application/msexcel': 表示 Excel 电子表格类型，可以以 Microsoft Excel 格式查看和编辑。*  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 表示 Excel 2007 或更高版本的文件类型，可以以 Office Open XML 格式查看和编辑。*  'image/jpeg'、'image/png'、'image/gif' 等：表示图像类型的数据，可以以图像的形式查看和编辑。* @returns */
function base64ToBlob(base64, mineType) {mineType = mineType || 'application/octet-stream'const byteCharacters = atob(base64)const byteNumbers = new Array(byteCharacters.length)for(let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i)}let byteArray = new Uint8Array(byteNumbers)return new Blob([byteArray], {type: mineType})
}

附-转base64后直接下载

function download(base64, mineType) {mineType = mineType || 'application/octet-stream'const dataUrl = `data:${mineType};base64,${base64}`const link = document.createElement('a')// document.body.appendChild(link)link.href = dataUrllink.download = 'file.xlsx' // 前提需要先知道是什么文件类型link.click() // 点击下载// document.body.removeChild(link) // 下载完成后移除标签
}

相关文章：

chrome扩展在popup、background、content之间通信解决传输文件问题

文章目录 背景介绍案例介绍代码示例popup页面&#xff0c;上传文件页面popup页面&#xff0c;js上传代码&#xff0c;file文件转base64background监听消息&#xff0c;base64转file文件&#xff0c;axios上传 附-转base64后直接下载 背景介绍 示例扩展API版本MV2。 以弹…...

编程日记 2023/8/4 7:07:38

Oracle获取创建对象的DDL脚本

Oracle获取创建对象的DDL脚本 Oracle获取创建对象的DDL脚本查看 dbms_metadata.get_ddl()函数的定义 Oracle获取创建对象的DDL脚本 例如&#xff0c;对tzq schema下的表 test2&#xff0c;查看DDL脚本的SQL如下&#xff1a; SELECT SELECT dbms_metadata.get_ddl(upper(table…...

编程日记 2023/8/4 7:06:37

《算法竞赛·快冲300题》每日一题：“01树”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 0…...

编程日记 2023/8/4 7:05:35

Mac提示文件：已损坏，无法打开。你应该把它移到废纸篓

文章目录 一、电脑信息二、打开任何来源设置三、更改应用程序拓展属性 一、电脑信息 我的是新版的Venture 13的系统。UI改的比较多。与之前的配置还是有很大的区别的。 打开下载的软件&#xff0c;显示已经损坏&#xff0c;打不开。抛开软件本身的问题外&#xff0c;一般是Ma…...

编程日记 2023/8/4 7:04:34

探索嵌入式系统：从入门到实践

随着科技的飞速发展&#xff0c;嵌入式系统已经成为了我们生活中不可或缺的一部分。从智能手机、智能家居到工业自动化设备&#xff0c;嵌入式系统的应用已经渗透到了各个领域。那么&#xff0c;如何学习嵌入式系统呢&#xff1f;本文将从入门到实践&#xff0c;为你详细解答。…...

编程日记 2023/8/4 7:03:32

网络安全知识点整理（作业2）

目录 一、js函数声明->function 第一种 第二种 第三种 二、this关键字 this使用场合 1.全局环境 2.构造函数 3.对象的方法 避免多层this 三、js的同步与异步 定时器 setTimeout和setInterval 同步与异步的例子 四、宏任务与微任务 分辨宏任务与微任务 一、js…...

编程日记 2023/8/4 7:02:30

idea数据库快速上手-库操作与表结构和数据操作

引言 对数据库的操作无非就是执行SQL语句&#xff0c;要想熟练操作数据库&#xff0c;就要熟练运用SQL语句。 一&#xff0c;数据库操作 展示当前服务器内的数据库 -- 展示服务器内的数据库 show databases; show schemas; 执行结果&#xff1a; 创建数据库&#xff1a; --…...

编程日记 2023/8/4 7:01:29

当“国潮”遇见“双语” 以传承之心种下一颗文化的种子

看&#xff0c;活灵活现的纸片人在“跳舞”。光影的辉映下&#xff0c;两个形神兼备的“齐天大圣”究竟孰真孰假&#xff1f;舞台上&#xff0c;京西皮影非遗传承人王熙和5岁的Mona小朋友正在用双语为大家带来一段“真假美猴王”的好戏。生动的皮影造型和精彩的故事演绎看得台下…...

编程日记 2023/8/4 7:00:28

计划管理与项目管理：有何区别？

简而言之&#xff0c;是的。尽管它们经常互换使用并对全局产生影响&#xff0c;但它们是完全不同的。 在本文中&#xff0c;我们将了解计划和项目管理之间的差异&#xff0c;提供每个示例&#xff0c;并向您展示如何使计划和项目管理工作更有效地实现您的业务目标。 计划管理与…...

编程日记 2023/8/4 6:59:27

个人信息保护合规审计如何做？

8月3日&#xff0c;为指导、规范个人信息保护合规审计活动&#xff0c;根据《中华人民共和国个人信息保护法》等法律法规&#xff0c;国家互联网信息办公室就《个人信息保护合规审计管理办法&#xff08;征求意见稿&#xff09;》&#xff08;简称《办法》&#xff09;及配套的…...

编程日记 2023/8/4 6:58:26

HTTP杂谈之Referer和Origin请求头再探

一 关于Referer和Origin的汇总 1) 知识是凌乱的,各位看官看个热闹即可2) 内容不断更新1、理解有盲区,需要及时纠正2、内容交叉有重复,需要适当删减3、扩展视野3) 以下内容都与Referer和Origin请求头有关联 nginx防盗链 HTTP杂谈之Referrer-Policy响应头 iframe标签referre…...

编程日记 2023/8/4 6:57:24

数学建模-爬虫入门

Python快速入门 简单易懂Python入门 爬虫流程 获取网页内容&#xff1a;HTTP请求解析网页内容&#xff1a;Requst库、HTML结果、Beautiful Soup库储存和分析数据 什么是HTTP请求和响应 如何用Python Requests发送请求 下载pip macos系统下载&#xff1a;pip3 install req…...

编程日记 2023/8/4 6:56:22

HSRM各表

文章目录 表规则接口种类服务与网关路由菜单一、采购申请1、采购申请—查询2、采购申请-操作记录二、采购申请跟踪报表1、采购申请跟踪报表—列表查询三、寻源1、寻源大厅—列表查询2、寻源大厅—询价单明细3、寻源大厅—物料明细4、寻源大厅—供应商列表5、寻源模板—列表查询…...

编程日记 2023/8/4 6:55:21

Ansible自动化运维工具 —— Playbook 剧本

playbooks 本身由以下各部分组成 &#xff08;1&#xff09;Tasks&#xff1a;任务&#xff0c;即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行 &#xff08;2&#xff09;Variables&#xff1a;变量 &#xff08;3&#xff09;Templates&#xff1a;模…...

编程日记 2023/8/4 6:54:19

第二章：多态

系列文章目录 文章目录 系列文章目录前言多态的概念概念 多态的定义及实现多态的构成条件虚函数虚函数的重写C11 override 和 final重载、覆盖(重写)、隐藏(重定义)的对比 抽象类概念接口继承和实现继承 多态的原理虚函数表多态的原理动态绑定与静态绑定 单继承和多继承关系的虚…...

编程日记 2023/8/4 6:53:18

C++面向对象设计基础

一般类、&、const、模板、友元函数、操作符重载基本用法及实现 complex.h #ifndef COMPLEX_H #define COMPLEX_H #include<ostream> using namespace std;template<typename T> class Complex{public:Complex():re(0),img(0){}// 为什么构造函数不能传引用&a…...

编程日记 2023/8/4 6:52:17

Linux定时运行sh脚本，如果sh文件已经在运行，则忽略本次运行

需求来源 我需要linux的crontab定期每10分钟运行lan.sh脚本。但由于lan.sh运行需要较长时间&#xff0c;有时超过10分钟。这样会导致系统多次运行lan.sh脚本&#xff0c;引发运行堆积&#xff0c;导致一些非必要的错误。 解决方法 解决方法是写一个脚本&#xff0c;如果lan.…...

编程日记 2023/8/4 6:51:15

SpringBoot项目中的web安全防护

最近这个月公司对项目进行了几次安全性扫描&#xff0c;然后扫描出来了一些安全漏洞&#xff0c;所以最近也一直在修复各种安全漏洞&#xff0c;还有就是最近在备考软考高级系统架构设计师&#xff0c;也刚好复习到了网络安全这一个章节&#xff0c;顺便将最近修复的安全漏洞总…...

编程日记 2023/8/4 6:50:12

stm32和python串口数据收发

1-1 串口发送端&#xff08;stm32&#xff09; 1字符串发送 void USART_SendData(USART_TypeDef* USARTx, uint16_t Data) {/* Check the parameters */assert_param(IS_USART_ALL_PERIPH(USARTx));assert_param(IS_USART_DATA(Data)); /* Transmit Data */USARTx->DR (D…...

编程日记 2023/8/4 6:49:11

无涯教程-jQuery - Dropable移动函数

Drop-able 功能可与JqueryUI中的交互一起使用。此功能可在任何DOM元素上启用可放置功能。 Drop able - 语法 $( "#droppable" ).droppable(); Drop able - 示例 以下是一个简单的示例&#xff0c;显示了drop-able的用法- <html><head><title>…...

编程日记 2023/8/4 6:48:10

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/8/30 17:31:32

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/8/30 17:32:05

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/8/28 18:02:58

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/8/11 22:22:05

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/8/30 6:06:17

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/8/22 5:38:04

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/8/4 8:15:54