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

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

news 2026/2/10 23:42:53

文章目录

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/2/10 15:47:33

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59