动手写一个简易的文档下载Chrome插件

本文介绍了一款基于AngularJS和Bootstrap的Chrome插件,该插件能够抓取当前页面中指定格式(如PDF、DOCX、PPT等)的文档下载链接,并提供筛选和下载功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考官网:https://developer.chrome.com/extensions/getstarted

要做的事情:获取当前页面所有文档的下载链接,并生成列表提供下载功能。

实现的思路:获取所有hre属性值后缀为指定文档格式的a标签,并保存结果,弹出框提供文档格式筛选及下载功能。

插件使用Angularjs及Bootstrap框架。

popup.html

<body ng-controller="ctrl">
    <div id="status"></div>
    <div id="filter">
        <label class="checkbox-inline">
            <input ng-change="checkBoxChange()" name="docType" type="checkbox" id="inlineCheckbox1" ng-value="pdf"  ng-model="selectedType.pdf">pdf
        </label>
        <label class="checkbox-inline">
            <input ng-change="checkBoxChange()" name="docType" type="checkbox" id="inlineCheckbox2" ng-value="docx"  ng-model="selectedType.docx">docx
        </label>
        <label class="checkbox-inline">
            <input ng-change="checkBoxChange()" name="docType" type="checkbox" id="inlineCheckbox3" ng-value="ppt"  ng-model="selectedType.ppt">ppt
        </label>
    </div>
    <div id="result">
        <div ng-repeat="item in results track by $index" ng-show="selectedType[item.type]">
            {{item.text}} &nbsp;
            <a ng-href="{{item.url}}" target="_blank">Download</a>
        </div>
        <div ng-if = "results.length == 0">
            <i>Not Found</i>
        </div>
    </div>

</body>

popup.js

angular.module("app", [])
    .controller("ctrl", function ($scope) {
        $scope.selectedType = { "ppt": true, "docx": true, "pdf": true };
        function isSelectedType(type) {
            return $scope.selectedType[type];
        }
        $scope.checkBoxChange = function () {
            var res = allResults.filter(function (data, index) {
                return $scope.selectedType[data.type];
            })
            $scope.results = res;
            $scope.$apply();
        }
        var allResults;
        chrome.tabs.query({
            active: true
        }, function (tabs) {
            var tab = tabs[0];
            tab_title = tab.title;
            chrome.tabs.executeScript(tab.id, {
                file: 'dom.js'
            }, function () {
                chrome.tabs.sendRequest(tab.id, { type: "pdf, ppt" }, function (results) {
                    allResults = results;

                    $scope.results = results;
                    $scope.$apply();

                });
            });
        });
    })

dom.js

function getLinks(r, s) {
  var links = document.querySelectorAll("a");
  var results = [];
  var seenLinks = {};

  for (var i = 0; i < links.length; i++) {

    if (links[i].href.indexOf(".pdf") !== -1 || links[i].href.indexOf(".docx") !== -1 || links[i].href.indexOf(".ppt") !== -1) {
      var type = "";
      if (links[i].href.indexOf(".pdf") !== -1) {
        type = "pdf";
      } else if (links[i].href.indexOf(".docx") !== -1) {
        type = "docx";
      } else if (links[i].href.indexOf(".ppt") !== -1) {
        type = "ppt";
      }
      var obj = {};
      obj.url = links[i].href;
      obj.type = type;
      obj.text = links[i].innerHTML;

      results.push(obj);
    }

  }
  return results;
};

chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {

  sendResponse(getLinks(request, sender));
});

示例网页内容:

<a href="test1.pdf">test1.pdf</a>
<a href="test2.pdf">test2.pdf</a>
<a href="正则表达式30分钟入门教程.pdf">正则表达式30分钟入门教程.pdf</a>
<a href="test3.zip">test3.zip</a>
<a href="test3.docx">test3.docx</a>
<a href="test3.ppt">test3.ppt</a>
<a href="test3.text">test3.text</a>

效果:

这里写图片描述

项目地址:https://github.com/YiNanKai/chrome-extension-download-helper

从多个网页的完整或选定内容创建Microsoft Word文档。 此扩展程序将完整的网页或网页的选定部分转换为Microsoft Word文档(docx)。您还可以选择将来自多个网页的内容或仅将其中的选定部分转换为单个Word文档。转换后的文档可以下载到本地磁盘。该扩展读取当前页面或所选部分HTML结构,并将其转换为相应的docx结构。限制:-1.安装/更新-安装或更新后,此扩展名不适用于在安装/更新之前打开的标签页,除非重新加载了这些标签页或重新启动了chrome 2.我可以转换什么? -此扩展程序可以将除以下页面之外的任何网页转换为Microsoft Word文档-所有Chrome网上应用店页面(包括此页面) Urls以chrome://开头 chrome:// extensions以chrome-extension://开头的URL。3.某些转换后的页面看起来不一样-所有内容都被转换为Word文档,其中大部分格式保持不变。布局可能会有所不同 4.为什么某些网页保存的文件显示方形框? -对于非英语的网页,尤其会发生这种情况。目前,应用程序不支持所有语言所需的字体转换 5.为什么本地HTML文件不起作用? -出于安全原因,Chrome浏览器不允许扩展名访问File Urls,除非得到用户的明确许可。如果您希望扩展程序适用于本地HTML文件,那么您要做的就是-1.访问扩展程序管理页面(chrome:// extensions) 2.转到“将网页另存为Word文档”扩展名 3.选中“允许访问文件URL”复选框 4.重新加载本地HTML文件。 支持语言:English
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值