0

0

浏览器扩展如何上传XML文件 background.js与服务器通信

月夜之吻

月夜之吻

发布时间:2026-01-24 01:59:23

|

709人浏览过

|

来源于php中文网

原创

需在manifest.json中声明权限和后台脚本,background.js通过FileReader读取XML,再用fetch手动构造multipart/form-data或用XMLHttpRequest配合FormData上传,并处理响应与错误。

浏览器扩展如何上传xml文件 background.js与服务器通信

如果您在开发浏览器扩展时需要通过 background.js 上传 XML 文件并与服务器通信,则需确保扩展具备文件读取权限、网络请求权限,并正确构造 multipart/form-data 请求。以下是实现此功能的具体步骤:

一、配置 manifest.json 权限与后台脚本声明

background.js 要执行跨域请求和文件读取操作,必须在 manifest.json 中显式声明所需权限。缺少对应权限会导致请求被拦截或 FileReader 报错。

1、在 manifest.json 的 permissions 字段中添加 "activeTab""storage" 和目标服务器域名(如 "https://api.example.com/")或 ""(仅开发调试阶段使用)。

2、在 manifest.json 的 host_permissions 字段(Manifest V3 必须)中添加服务器地址,例如:["https://api.example.com/*"]

3、确保 background 服务工作器已正确定义:在 manifest.json 中设置 "background": {"service_worker": "background.js"}(Manifest V3)或 "background": {"scripts": ["background.js"], "persistent": false}(Manifest V2)。

二、在 background.js 中读取并解析 XML 文件内容

XML 文件需先由 content script 或弹出页选择后传递至 background.js,background.js 无法直接访问用户本地文件系统,必须依赖 FileReader 异步读取 Blob 数据。

1、接收来自 content script 的文件对象(通过 chrome.runtime.sendMessage)。

2、创建 FileReader 实例,调用 readAsText(file, "UTF-8") 方法读取 XML 内容;若需保留原始二进制结构(如含特殊编码或签名),则改用 readAsArrayBuffer(file)

3、在 FileReader 的 onload 回调中获取 event.target.result,该值即为 XML 字符串或 ArrayBuffer 数据,供后续构造请求使用。

三、使用 fetch 构造 multipart/form-data 请求上传 XML

XML 文件需作为表单字段提交,不能直接以纯文本 body 发送;fetch 不支持自动构建 multipart,必须手动构造边界字符串和请求体。

1、生成唯一边界标识符,例如:const boundary = "----WebKitFormBoundary" + Math.random().toString(36).substr(2, 9)

2、将 XML 字符串转换为 Uint8Array,使用 TextEncoder 编码:const encoder = new TextEncoder(); const xmlBytes = encoder.encode(xmlString)

快写红薯通AI
快写红薯通AI

快写红薯通AI,专为小红书而生的AI写作工具

下载

3、拼接 multipart 正文:起始行、Content-Disposition 头(含 filename="data.xml")、空行、XML 字节数据、结束边界行;所有换行必须为 "\r\n"

4、设置 fetch 的 headers:{"Content-Type": "multipart/form-data; boundary=" + boundary},并将拼接后的 Uint8Array 作为 body 传入。

四、使用 XMLHttpRequest 替代方案上传 XML

XMLHttpRequest 原生支持 FormData 对象,可简化 multipart 构造逻辑,尤其适合处理带元数据的 XML 提交。

1、新建 FormData 实例:const formData = new FormData()

2、调用 append 方法添加 XML 文件:formData.append("xml_file", new Blob([xmlString], {type: "text/xml"}), "data.xml")

3、可附加其他字段,如:formData.append("token", "abc123")

4、创建 XMLHttpRequest 实例,监听 onreadystatechange,调用 open("POST", url) 和 send(formData)。

五、处理服务器响应与错误反馈

background.js 需捕获网络异常、HTTP 状态码及响应格式错误,避免静默失败;上传结果应通过 chrome.runtime.sendMessage 返回给前端界面。

1、fetch 场景下检查 response.ok === falseresponse.status >= 400,并调用 response.text() 获取错误详情。

2、XMLHttpRequest 场景下判断 xhr.status === 0 表示网络中断,xhr.status === 4xx/5xx 表示服务端拒绝或错误。

3、无论成功或失败,均需调用 chrome.runtime.sendMessage({type: "upload_result", data: {...}}) 将结果通知 content script 或 popup。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

417

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

76

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

822

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

736

2023.11.06

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1897

2024.04.01

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2088

2024.08.01

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.5万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号