Chrome PDF下载扩展开发求助：指定文件夹存储或上传服务器

我正在开发一款Google Chrome扩展，用于处理PDF下载，希望实现两个核心功能：将下载的PDF保存到指定文件夹，以及将PDF上传至服务器，但目前遇到了瓶颈，请求帮助。以下是我已完成的代码：

manifest.json代码 #

{
    "name": "PDF",
    "version": "1.0.1",
    "description": "test extension second trial",
    "manifest_version": 3,
    "author": "Petach",
    "action": {
        "default_popup":"popup.html"
    },
    "icons": {
        "16":"icons/16.png",
        "32":"icons/32.png",
        "48":"icons/48.png",
        "128":"icons/128.png"
    },
    "permissions": [ "downloads", "activeTab"],
    "background":{}
}

popup.html代码 #

<!DOCTYPE html>
<html>

<head>
    <title>PDF</title>
    <link rel="stylesheet" type="text/css" href="popup.css" />
    <script src="popup.js"></script>
</head>

<body>
    <h1>MIS</h1>
    <!-- <button id="grabBtn">Upload to Server</button> -->
</body>

</html>

popup.js代码 #

var folder = "PDF_downloads";

chrome.downloads.onDeterminingFilename.addListener(
    function (item, suggest) {

        if (isPDF(item)) suggest({ filename: folder + "/" + item.filename });
        else suggest();
    }
);

function isPDF(item) {
    if (item.mime === "application/pdf") return true;
    else if (item.filename.match(/\.pdf$/i)) return true;
    else return false;
}

// const grabBtn = document.getElementById("grabBtn");
// grabBtn.addEventListener("click", () => {
//     alert("CLICKED");
// })

问题修复与功能实现方案 #

一、指定文件夹保存PDF的问题修复

当前代码的核心问题是：chrome.downloads.onDeterminingFilename监听器放在popup.js中无效，因为popup是临时弹窗，关闭后监听器会被销毁。必须将该逻辑移至后台Service Worker中，步骤如下：

1. 修改manifest.json，配置后台Service Worker：

{
    // ... 原有配置
    "background": {
        "service_worker": "background.js"
    }
}

2. 创建background.js文件，将PDF命名逻辑移至此处：

const folder = "PDF_downloads";

chrome.downloads.onDeterminingFilename.addListener((item, suggest) => {
    if (isPDF(item)) {
        suggest({ filename: `${folder}/${item.filename}` });
    } else {
        suggest();
    }
});

function isPDF(item) {
    return item.mime === "application/pdf" || /\.pdf$/i.test(item.filename);
}

注意：Chrome限制扩展无法指定绝对下载路径，PDF_downloads文件夹会创建在浏览器默认下载目录下。

二、实现PDF上传至服务器功能

1. 恢复popup.html中的上传按钮：

<button id="grabBtn">Upload to Server</button>

2. 修改popup.js，实现上传逻辑（以当前标签页PDF为例）：

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click", async () => {
    // 获取当前活动标签页
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    if (tab.url.endsWith(".pdf")) {
        // 请求PDF文件Blob数据
        fetch(tab.url)
            .then(response => response.blob())
            .then(blob => {
                // 构造FormData用于上传
                const formData = new FormData();
                formData.append("pdfFile", blob, tab.url.split("/").pop());
                
                // 替换为你的服务器上传接口
                fetch("https://your-upload-api.com", {
                    method: "POST",
                    body: formData
                })
                .then(res => res.json())
                .then(() => alert("上传成功！"))
                .catch(err => alert(`上传失败：${err.message}`));
            });
    } else {
        alert("当前页面不是PDF文件！");
    }
});

3. 在manifest.json中添加服务器域名权限（替换为你的实际域名）：

{
    // ... 原有配置
    "host_permissions": ["https://your-upload-api.com/*"]
}

内容的提问来源于stack exchange，提问作者Peter Achieng