如何检测浏览器在Web扩展中接收下载

在本文中，我们将看到如何在浏览器中检测下载事件。浏览器支持一种称为扩展API的东西，它允许您做更多处理网页之外的事情。有许多API可以用于制作浏览器扩展，其中之一是下载API。它使我们能够与浏览器的下载管理器进行交互。您可以使用此API模块下载文件、取消、暂停、恢复下载，并在文件管理器中显示已下载的文件。

要使用此API，您需要在manifest.json文件中指定“ downloads ”API权限。该文件基本上用于构建您的Web应用的渐进式Web应用。 downloads API通过 browser API进行访问。

示例： 下载API只能在后台环境中访问，因此您需要在下面的清单文件中添加一个字段 background 。background字段是一个包含 script 字段的对象，其中运行您的背景js文件。

{
   "name":"扩展名称",
   "version":"版本",
   "permissions":["downloads", "downloads.open"],
   "manifest_version": 2,
   "background":{
    "scripts":["index.js"]
    },
}

下载API由三个不同的事件组成，如下所述：

downloads.onCreated: 下载开始时触发。
downloads.onErased: 下载从历史记录中删除时触发。
downloads.onChanged: 下载ID和一个包含更改属性的对象时触发。

我们可以使用上述任何事件来检测下载事件。现在，让我们通过一个简单示例来理解如何检测下载事件

以下是我们使用的代码来打印有关已下载项目的信息：

function handleCreated(downloadItem) {
    console.log(downloadItem);
}
browser.downloads.onCreated.addListener(handleCreated);

onCreated 事件返回一个代表已下载文件的 downloadItem 对象。

在这里，我们使用以下代码来在完成后打印 **** 已下载的项目：

function handleChanged(DownloadDelta) {
    if (DownloadDelta.state && 
        DownloadDelta.state.current === "complete") {
           console.log(delta.id);
     }
}
browser.downloads.onChanged.addListener(handleChanged);

DownloadItem: 这表示已下载的文件，并作为参数传递给 onCreated 事件。

DownloadItem提供了多种属性，如下所述：

bytesReceived: 下载过程中从主机接收的字节数
canResume: 一个布尔值，指示当前暂停的下载是否可以从暂停的地方恢复
danger: 一个字符串，指示此下载是否被认为是安全的或者已知是可疑的。
endTime: 一个字符串，表示UNIX纪元和下载结束之间的毫秒数。如果下载还没有结束，这个值未定义。
error: 一个字符串，指示下载被中断的原因。
filename: 一个字符串，表示文件的绝对本地路径。
fileSize: 一个数字，表示整个文件在解压缩之后的总字节数。这里的值为-1表示总文件大小未知。
id: 一个整数，表示一个唯一标识符，用于已下载的文件，在浏览器会话之间保持不变。
startTime: 一个字符串，表示UNIX纪元和下载开始之间的毫秒数。
state: 一个字符串，指示下载是正在进行中，中断还是已完成。
totalBytes: 一个数字，表示正在下载的文件的总字节数。这里的值为-1表示字节数的总数未知。
url: 一个字符串，表示从中下载文件的绝对URL。

示例1： 在这个示例中，我们将检测下载并打印下载项。

方法：

创建清单、HTML和JS文件，并按照本文中的步骤加载扩展。
打开后台检查控制台。
在localhost:5501上运行HTML文件（您可以使用VS Code）。
在base.html文件中，当您点击下载链接时，后台脚本打印下载项。

manifest.json:

{
   "name":"my-extension",
   "version":"1.0.4",
   "description":"此扩展帮助您检测下载",
   "manifest_version": 2,
   "permissions":["downloads"],
     "background": 
       {
         "scripts": ["app.js"]
       }     
}

base.html:

<!DOCTYPE html>
<html>
 
<head>
    <title>Download</title>
</head>
 
<body>
    <h1 style="color:green">GeekForGeeks</h1>
    <h3>
        如何检测浏览器何时
        在Web扩展中接收下载？
    </h3>
    <a href="http://127.0.0.1:5501/base.html" download>
      下载
      </a>
</body>
 
</html>

app.js:

// App.js
function handleCreated(downloadItem) {
   console.log(downloadItem);
}
browser.downloads.onCreated.addListener(handleCreated);

结果: 在这里，我正在使用URL http://127.0.0.1/base.html 运行base.html，下载的href也在相同的源上。

如何检测浏览器在Web扩展中接收下载

上述输出中的后台脚本控制台输出的downloadItem对象是：

对象 { 
    id: 7,
    url: "http://127.0.0.1:5501/base.html", 
    referrer: "http://127.0.0.1:5501/base.html", 
    文件名: "C:\\Users\\NIKHIL\\Downloads\\base.html", 
    隐身模式: false, cookie存储Id: "firefox-default", 
    危险: "安全", 
    类型: "文本/HTML", 
    开始时间: "2022-10-06T08:10:17.599Z", 
    结束时间: null, ...
}

示例2： 在这个例子中，我们将在控制台上打印下载URL和开始时间。

方法：

创建清单、HTML和JS文件，并按照本文进行扩展加载。
打开背景检查控制台。
在localhost:5501上运行HTML文件（您可以使用VS代码）。
在base.html文件中，当您点击下载链接时，背景脚本会输出下载URL。

manifest.json:

{
      "name":"my-extension",
      "version":"1.0.4",
      "description":"这个扩展功能可以帮助您检测下载",
      "manifest_version": 2,
      "permissions":["downloads"],
    "background": {
        "scripts": ["app.js"]
    }     
}

base.html:

<!DOCTYPE html>
<html>
 
<head>
    <title>下载</title>
</head>
 
<body>
    <h1 style="color:green">GeekForGeeks</h1>
    <h3>
        如何在Web扩展中检测浏览器接收到下载？
    </h3>
    <a href="http://127.0.0.1:5501/base.html" download>
        下载
    </a>
</body>
 
</html>

app.js:

function handleCreated(downloadItem) {
console.log(
`Download from  ${downloadItem.url} +'' +at starttime$ {downloadItem.startTime}`);
}
browser.downloads.onCreated.addListener(handleCreated);

输出:

如何检测浏览器在Web扩展中接收下载