手把手带你开发一个批量下载资源的谷歌浏览器扩展

最新推荐文章于 2023-03-27 18:04:07 发布

我的小英短

最新推荐文章于 2023-03-27 18:04:07 发布

阅读量5.2k

点赞数

分类专栏： javascript chrome 文章标签： chrome extension javascript video image

本文链接：https://blog.csdn.net/WU5229485/article/details/83474132

版权

本文介绍了一款谷歌浏览器扩展的开发过程，该扩展能批量下载网页上的图片、视频和链接资源，具备筛选、复制链接和自定义下载目录等功能。文章详细讲解了开发流程，包括popup.html和popup.js的实现，以及通信逻辑。同时，作者分享了开发中遇到的问题及解决方案，并指出该扩展的不足和未来改进方向。

摘要由CSDN通过智能技术生成

唠一唠、

今天呢，我们来开发一款谷歌浏览器插件，这是一款怎样的插件呢？接下来我就为大家揭秘其神秘的面纱。这是一款面向网页，分类抓取图片资源，视频资源，链接资源（包括压缩包等），并且实现了资源可筛选，可选择，链接复制，资源批量下载，自定义下载的文件夹功能。反正一句话，妥妥的方便，终于可以解放双手了，不用到处右键另存为啦！而且有些页面还做了右键另存为屏蔽，尴尬。所以，恭喜你，有了这款插件，一切的一切都可以解决啦！

一、最终预览效果

1. 图片批量下载

（1）图片批量下载界面展示

（2）下载后的预览

2. 视频批量下载

（1）视频批量下载界面展示

（4）视频下完后预览

3. 链接批量复制

（1）链接展示界面

（2）链接复制操作

（3）粘贴复制的链接

二、开发流程

1. pupup.html页面

用于展示，批量下载可操作的界面层

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片批量下载</title>
    <style type="text/css">
        *{margin:0;padding:0}
    </style>
    <link rel="stylesheet" type="text/css" href="./styles/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./styles/popup.css" />
</head>
<body>

    <div class="wrap">
        
        <!-- 筛选输入框 -->
        <header class="filter-header container">
            <div class="row row-radio">
                <div class="col-xs-9"