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

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

news 2026/2/11 0:06:07

文章目录

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/9 21:57:29

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2026/2/9 17:44:07

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

编程新知 2025/11/18 1:57:23