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

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

news 2025/6/23 21:35:01

文章目录

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/6/22 21:15:44

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/6/21 6:32:50

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/6/18 13:47:59

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/6/18 20:49:21

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/6/22 7:04:59

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/6/21 10:14:28

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/6/18 0:27:32

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/6/21 2:52:10

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2025/6/22 8:23:18

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/6/21 4:21:03