动手写一个简易的文档下载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
### 如何通过 Chrome 插件实现对特定页面的持续监控 要实现对特定页面(如编制办公室网页或表单)的持续监控,可以利用现有的功能强大的 Chrome 扩展工具,或者自行开发定制化的插件来满足需求。 #### 使用现有扩展工具 一种简单的方式是借助已有的 Chrome 插件完成此任务。例如,“Page Monitor” 是一款专门用于监控网页内容变化的扩展[^2]。安装并配置该插件后,可以通过设置目标 URL 和指定需要检测的变化区域,让其定期检查所关注的网页是否有任何改动。一旦发现变动,它会在浏览器的通知栏发出提示消息,这对于跟踪诸如价格波动、公告发布或是职位状态更新等情况特别适用。 #### 自定义开发解决方案 如果现成的插件无法完全匹配具体的需求,则可以选择自定义开发一个专属的 Chrome 插件。以下是构建此类应用的一些关键技术要点: 1. **权限声明** 需要在 `manifest.json` 文件中请求必要的权限以便访问目标站点以及执行脚本注入等功能。这通常涉及 `"activeTab"` 或者更具体的网址模式匹配规则。 ```json { "name": "Custom Page Watcher", "version": "1.0", "description": "Monitors specific webpages for changes.", "permissions": ["tabs", "<all_urls>"], "background": { "scripts": ["background.js"] }, "content_scripts": [ { "matches": ["*://example.com/*"], // 替换为目标网站的实际地址 "js": ["contentScript.js"] } ], "browser_action": { "default_popup": "popup.html" }, "manifest_version": 2 } ``` 2. **后台逻辑编 (Background Script)** 背景脚本负责定时触发刷新机制,并调用内容脚本来抓取最新的 DOM 结构进行比较分析。下面是一个简单的伪代码示例展示如何安排周期性的 HTTP 请求去获取远程资源的状态码和主体部分。 ```javascript chrome.alarms.create('checkForUpdates', { periodInMinutes: 5 }); chrome.alarms.onAlarm.addListener((alarm) => { if(alarm.name === 'checkForUpdates'){ fetch('http://target-site-url') .then(response => response.text()) .then(htmlContent => compareWithPreviousVersion(htmlContent)); } }); function compareWithPreviousVersion(newHtml){ let oldData = localStorage.getItem('lastKnownState'); if(oldData !== newHtml){ notifyUser(); localStorage.setItem('lastKnownState',newHtml); } } function notifyUser(){ console.log("Website has been updated!"); // 可在此处添加更多通知方式比如弹窗显示等 } ``` 3. **前端交互界面设计(Popup UI)** 提供给用户友好的图形化控制面板允许他们输入待监视的目标链接以及其他偏好选项。这部分可以用 HTML/CSS/JS 来制作静态布局再嵌入到 manifest 中作为 popup 的入口文件路径。 4. **数据存储与持久化处理(Local Storage / IndexedDB)** 对于那些希望保存历史记录或者长期对比差异的情况来说,在本地数据库里维护一份副本显得尤为重要。这里推荐采用 WebStorage API 下面的 LocalStorage 方法来进行轻量级的数据缓存操作。 以上方法提供了两种途径——即选用成熟的第三方应用程序或者是自己动手打造个性化的监测方案——帮助达成针对特殊场合下的自动化监督目的。无论是哪条路线都离不开扎实的技术基础支持,因此建议开发者们不断积累经验并通过实践提高技能水平[^4]。 ```python import requests from bs4 import BeautifulSoup def check_webpage_changes(url, previous_content=None): try: res = requests.get(url) soup = BeautifulSoup(res.content,'html.parser') current_page_text=soup.body.getText().strip() if not previous_content or previous_content !=current_page_text : return True ,current_page_text else: return False,None except Exception as e: print(f"Error occurred while checking webpage:{e}") return None,None if __name__ == "__main__": url="https://www.example-official-office.gov/" changed,new_data=check_webpage_changes(url) if changed is not None and changed==True: with open('./webpage_snapshot.txt','w')as f: f.write(new_data) ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值