Chrome扩展导出CSV时调用chrome.downloads.download报错如何解决

上下文隔离导致的核心错位 #

• 弹窗脚本的执行环境和目标网页完全独立，弹窗代码里的document指向的是popup.html本身的DOM，根本访问不到目标网页上的.horse_basics、.horse_name等自定义类元素。
• 当前popup.js没有给页面上id="clickme"的按钮绑定点击触发事件，脚本会在弹窗加载完成时就直接执行所有逻辑，此时既没有用户交互上下文，也无法访问目标网页DOM，必然触发空值报错。
• 脚本提前在DOM取值环节触发空值错误，Chrome的错误定位逻辑会把报错行标记到最后调用chrome.downloads.download的位置，给人一种下载接口未定义的错觉。
• 你的manifest.json已经正确声明了downloads权限，不存在权限缺失导致API未定义的问题，无需调整这部分配置。

下载调用环节的代码硬错误 #

即便解决了上下文隔离问题，现有下载逻辑也无法正常运行：

• Blob生成逻辑错误：Blob构造函数要求第一个参数是字符串片段数组，当前传入的连续数值数组没有任何分隔符，会生成无格式的乱码文本，无法形成有效CSV内容。
• 文件名取值逻辑错误：document.getElementsByClassName("horse_name")返回的是类数组集合，直接读取innerText属性会得到undefined，拼接到文件名后会触发接口参数校验报错。
• 路径参数非法：filename字段中写入的csv/file*带子目录斜杠的路径，会被Chrome下载接口拦截，不允许扩展直接在本地磁盘创建未授权的子目录。

正确实现逻辑 #

• 第一步：在弹窗JS中给按钮绑定点击事件，事件触发后通过chrome.tabs.query获取当前激活的目标网页标签，通过chrome.tabs.executeScript将DOM提取逻辑注入到目标网页上下文执行，将提取到的结构化数据通过回调传回弹窗环境。
• 第二步：将传回的结构化数据按CSV格式拼接为纯文本（字段间用逗号分隔、行之间用换行分隔），生成对应Blob对象，指定MIME类型为text/csv;charset=utf-8。
• 第三步：调用chrome.downloads.download时，filename参数直接填写纯文件名（无路径斜杠），并在下载触发后延迟调用URL.revokeObjectURL释放Blob占用的内存。

内容的提问来源于stack exchange，提问作者Dessy Lupin