我计划开发一个 Google Chrome 扩展程序，充当下载管理器，即。当用户从浏览器下载任何项目时，扩展程序必须捕获它并在顶部显示其下载进度。
所以我已经完成了两个名为 manifest.json 和 popup.html 的文件。
manifest.json
起作用的主文件
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "something",
"version": "1.0",
"permissions": [
"<all_urls>",
"downloads"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["myscript.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
该文件作为弹出窗口出现在 Chrome 的侧边栏上。
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*5,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
</head>
<body>
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
</body>
</html>
myscript.js
<script>
var c = chrome.downloads.search({query: }, function(results){
var formattedResults = [];
for(var i in results) {
chrome.downloads.download(
{
method: "POST",
filename: results[i]
}, function () {
if(results[i] == undefined ) {
console.log('files arent located');
} else {
console.log('its downloading');
}
)
})
</script>
我面临的问题
当我在 list 文件中运行 popup.js 时，它不会显示进度(即值增量)，但当我单独运行它时它工作得很好。
我只是希望能够检测用户下载的文件并在 popup.html 上显示其进度。
我已经尝试过chrome.downloads但这没有帮助。也许是因为我不是 Google api 方面的专家。
最佳答案
Check out Google's example extensions that use the chrome.downloads api 。例如，正如 Graham T 所建议的，您可能可以使用 onChanged event由以下示例扩展使用:Download and Open Button和 Download Manager Button .
chrome.downloads
- https://developer.chrome.com/extensions/downloads
- 使用 chrome.downloads API 以编程方式启动、监控、操作和搜索下载。
从下载管理器按钮:
DownloadItem.prototype.onChanged = function(delta) {
for (var key in delta) {
if (key != 'id') {
this[key] = delta[key].current;
}
}
this.render();
if (delta.state) {
setLastOpened();
}
if ((this.state == 'in_progress') && !this.paused) {
DownloadManager.startPollingProgress();
}
};
我建议查看示例代码的其余部分，因为它应该更清楚地说明如何正确使用 chome.downloads。
关于javascript - 使用 api 检查文件是否在 Chrome 中下载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26442007/