参考官网: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}}
<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