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

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

要使用此API，您需要在manifest.json文件中指定“ downloads ”API权限。该文件主要用于构建逐步式Web应用，体现了您的Web应用的特性。 downloads API通过 browser API访问。

示例： downloads API只能在后台上下文中访问，因此您需要在下面的清单文件中添加一个 background 字段。background字段是一个具有 script 字段的对象，您可以在其中运行后台js文件。

{
   "name":"name of the extension",
   "version":"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对象。

这里，我们使用以下代码打印下载完成的downloadedItem：

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）： 一个表示文件下载的绝对URL的字符串。

示例1： 在这个示例中，我们将检测下载并输出downloadItem

方法：

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

manifest.json（清单文件）：

{
   "name":"my-extension",
   "version":"1.0.4",
   "description":"This Extension helps you detect download",
   "manifest_version": 2,
   "permissions":["downloads"],
     "background": 
       {
         "scripts": ["app.js"]
       }     
}

base.html：

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Download</title>
</head>
 
<body>
    <h1 style="color:green">GeekForGeeks</h1>
    <h3>
        How to detect when browser 
        receives download in web extension ?
    </h3>
    <a href="http://127.0.0.1:5501/base.html" download>
      Download
      </a>
</body>
 
</html>

app.js:

Javascript

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

输出： 这里，我正在使用URL http://127.0.0.1/base.html 在一个实时服务器上运行base.html，并且下载链接也在相同的源处下载。

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

在上面的输出中，由background脚本打印出的downloadItem对象是：

Object { 
    id: 7,
    url: "http://127.0.0.1:5501/base.html", 
    referrer: "http://127.0.0.1:5501/base.html", 
    filename: "C:\\Users\\NIKHIL\\Downloads\\base.html", 
    incognito: false, cookieStoreId: "firefox-default", 
    danger: "safe", 
    mime: "text/html", 
    startTime: "2022-10-06T08:10:17.599Z", 
    endTime: null, ...
}

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

方法：

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

manifest.json：

{
      "name":"my-extension",
      "version":"1.0.4",
      "description":"This Extension helps you detect download",
      "manifest_version": 2,
      "permissions":["downloads"],
    "background": {
        "scripts": ["app.js"]
    }     
}

base.html:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Download</title>
</head>
 
<body>
    <h1 style="color:green">GeekForGeeks</h1>
    <h3>
        How to detect when browser receives 
        download in web extension ?
    </h3>
    <a href="http://127.0.0.1:5501/base.html" download>
        Download
    </a>
</body>
 
</html>

app.js：

JavaScript

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

输出：

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