I have planned to develop a Google Chrome extension which act as a download manager ie. when a user downloads any item from the browser the extension must catch it and display its downloading progress at the top.
So I have done with two fles named manifest.json and popup.html.
manifest.json
The main file which es in action
{
"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
The file which act as a popup which appears on the sidebar of the 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>
The problems that I face
When I run the popup.js in the manifest file it doesn't show me the progress (ie. value incrementation) but it works just fine when I run it separately.
I just want to able to detect the file in which the user has downloaded and display its progress on popup.html.
I have tried chrome.downloads but it didn't help. Maybe it's because I am not an expert in Google apis.
I have planned to develop a Google Chrome extension which act as a download manager ie. when a user downloads any item from the browser the extension must catch it and display its downloading progress at the top.
So I have done with two fles named manifest.json and popup.html.
manifest.json
The main file which es in action
{
"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
The file which act as a popup which appears on the sidebar of the 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>
The problems that I face
When I run the popup.js in the manifest file it doesn't show me the progress (ie. value incrementation) but it works just fine when I run it separately.
I just want to able to detect the file in which the user has downloaded and display its progress on popup.html.
I have tried chrome.downloads but it didn't help. Maybe it's because I am not an expert in Google apis.
Share Improve this question edited Feb 23, 2019 at 21:57 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Oct 18, 2014 at 16:29 Avinash BabuAvinash Babu 6,2524 gold badges23 silver badges26 bronze badges 6- I've never done extension development, but looks like you need to checkout the downloadItem type. It has a bytesReceived and fileSize property. It doesn't look like the onChanged method supports bytesReceived, but there must be some other way to bind an event to the amount of data downloaded. developer.chrome./extensions/downloads#type-DownloadItem developer.chrome./extensions/downloads#event-onChanged – Graham T Commented Oct 27, 2014 at 0:14
- @GrahamT i have checked it out ..but i dont know how to start ..i want the user to download the selected item..from the page ..i dont want to bind an item in downloads api – Avinash Babu Commented Oct 27, 2014 at 12:13
- @AvinashBabu any luck with the code I provided? – JSuar Commented Oct 28, 2014 at 13:43
- @JSuar no it doesnt ..:( – Avinash Babu Commented Oct 28, 2014 at 14:13
- @AvinashBabu did you look at the rest of the Download Manager Button code? – JSuar Commented Oct 28, 2014 at 14:24
1 Answer
Reset to default 3Check out Google's example extensions that use the chrome.downloads api. For example, as Graham T suggested, you could probably use the onChanged event which is used by the following example extension: Download and Open Button and Download Manager Button.
chrome.downloads
- https://developer.chrome./extensions/downloads
- Use the chrome.downloads API to programmatically initiate, monitor, manipulate, and search for downloads.
From Download Manager Button:
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();
}
};
I remend looking at the rest of the sample code as it should be clearer on how to properly use chome.downloads.