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

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

news 2026/4/18 0:42:10

文章目录

  • 背景介绍
  • 案例介绍
  • 代码示例
    • 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

2026届必备的十大AI学术网站解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 知网已正式推出AIGC检测服务系统&#xff0c;此系统目的在于识别学术文本里由人工智能生成的…...

编程新知 2026/4/18 0:42:08

5分钟免费将照片变3D模型：ImageToSTL终极图片转STL工具完全指南

5分钟免费将照片变3D模型&#xff1a;ImageToSTL终极图片转STL工具完全指南 【免费下载链接】ImageToSTL This tool allows you to easily convert any image into a 3D print-ready STL model. The surface of the model will display the image when illuminated from the le…...

编程新知 2026/4/18 0:32:04

从医疗分割到图像修复：手把手复现一个你自己的MIMO-UNet去模糊模型

从医疗分割到图像修复&#xff1a;手把手复现一个你自己的MIMO-UNet去模糊模型 在计算机视觉领域&#xff0c;图像去模糊一直是个极具挑战性的任务。想象一下&#xff0c;你拍摄了一张珍贵的照片&#xff0c;却因为手抖或对焦不准而变得模糊不清——这正是图像去模糊技术要解决…...

编程新知 2026/4/18 0:19:37

爆火收藏｜大模型入门保姆级指南， 小白程序员必看，零踩坑不焦虑，快速上手不内耗

近年来&#xff0c;大模型技术迎来爆发式发展&#xff0c;无论是刚入门的编程小白&#xff0c;还是想转型AI领域的程序员&#xff0c;都渴望抓住这波技术红利。但面对海量碎片化信息、各种“入门必学”的焦虑式宣传&#xff0c;很多人陷入了迷茫&#xff1a;到底要先学什么&…...

编程新知 2026/4/17 21:42:06

【每日一题】一文搞懂消费类电子的电池容量单位

我们平时使用移动充电宝&#xff0c;笔记本电脑&#xff0c;手机&#xff0c;智能穿戴设备&#xff0c;例如智能眼镜&#xff0c;经常看到标注的电池的容量大小&#xff0c;被五花八门的单位搞得晕头转向&#xff0c;今天我们就来看看这些单位&#xff0c;例如mA&#xff0c;mA…...

编程新知 2026/4/17 21:21:40

生产景区门票定制制造商推荐

在旅游行业蓬勃发展的今天&#xff0c;景区门票作为游客进入景区的凭证&#xff0c;不仅要具备基本的入园功能&#xff0c;还承载着景区的文化特色和宣传使命。因此&#xff0c;选择一家专业靠谱的景区门票定制制造商至关重要。今天&#xff0c;就为大家推荐广州杰众智能科技有…...

编程新知 2026/4/17 17:43:31

保姆级教程：在Ubuntu 20.04上为RISC-V芯片（如玄铁C910）编译运行CoreMark v1.01

RISC-V平台CoreMark性能测试全流程实战指南 在嵌入式开发领域&#xff0c;选择适合的基准测试工具对处理器性能进行准确评估至关重要。CoreMark作为业界公认的轻量级测试标准&#xff0c;特别适合评估RISC-V这类精简指令集架构的核心处理能力。本文将手把手带你完成从工具链配置…...

编程新知 2026/4/17 15:17:41

Qwen3.5-9B惊艳案例：上传架构图→生成部署脚本→输出CLI命令全过程

Qwen3.5-9B惊艳案例&#xff1a;上传架构图→生成部署脚本→输出CLI命令全过程 1. 开篇&#xff1a;90亿参数大模型的惊艳能力 Qwen3.5-9B作为一款90亿参数的开源大语言模型&#xff0c;在技术圈引起了广泛关注。这个模型最让人惊叹的是它强大的多模态理解能力——不仅能处理…...

编程新知 2026/4/17 13:06:55

高并发场景下，如何优雅地做系统限流与降级？

高并发场景下&#xff0c;如何优雅地做系统限流与降级&#xff1f; 在互联网应用中&#xff0c;高并发请求是常态&#xff0c;尤其在电商大促、秒杀活动或突发流量场景下&#xff0c;系统可能面临崩溃风险。如何通过限流与降级策略保障系统稳定&#xff0c;成为开发者必须掌握…...

编程新知 2026/4/17 11:40:52

从AlexNet到ResNet：为什么说2012年的这篇论文是今天所有CV模型的“祖师爷”？

从AlexNet到ResNet&#xff1a;计算机视觉革命的奠基时刻 2012年&#xff0c;当AlexNet以压倒性优势赢得ImageNet竞赛时&#xff0c;很少有人能预料到这篇论文会成为深度学习时代的里程碑。它不仅将传统方法的错误率降低了近一半&#xff0c;更重要的是确立了一系列沿用至今的…...

编程新知 2026/4/17 11:40:51