我正在尝试在Chrome扩展程序中下载多个文件.以下代码创建指向文件的虚拟链接,然后触发下载文件的.click()事件.
问题是只有第一个.click()事件才会触发下载.后续的.click()事件将被忽略.
问题是只有第一个.click()事件才会触发下载.后续的.click()事件将被忽略.
这里的manifest.json：
{
"name": "Simple File Downloader","version": "0.1","permissions": ["contextMenus","http://*/"],"background": {
"persistent": false,"scripts": ["sample.js"]
},"content_security_policy": "script-src 'self'; object-src 'self'","manifest_version": 2
}
这里是sample.js：
function onClickHandler(info,tab) {
var a = document.createElement('a');
a.href = 'http://or.cdn.sstatic.net/chat/so.mp3';
a.download = 'so.mp3';
document.body.appendChild(a);
a.click(); // this click triggers the download
// this timeout violates content security policy
// setTimeout(a,300);
a.click(); // this click doesn't do anything
document.body.removeChild(a);
a = document.createElement('a');
a.href = 'http://or.cdn.sstatic.net/chat/so.mp3';
a.download = 'so.mp3';
document.body.appendChild(a);
a.click(); // this click doesn't do anything either
document.body.removeChild(a);
};
chrome.contextMenus.onClicked.addListener(onClickHandler);
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({"title": "Download File","id":"download_file"});
});
我试过了：
>使用FileSaver.js在Chrome Extension write to file system中描述的下载文件的不同方法,结果完全相同,第一个文件被下载,第二个文件没有
>如Is it possible to make two .click method calls in javascript所述添加超时,导致内容安全策略违规,我试图使用Content-Security-Policy error in google chrome extension making中描述的方法解决,但没有成功
>使用JQuery click event works only once中描述的jQuery .live方法,也没有成功,但我并不是100％确定我正确地实现了这个(如果人们认为这种方法应该解决它,可以稍后发布代码)
很惊讶为什么简单地保存多个文件很难.感谢任何帮助.
解决方法
诀窍不是使用element.click方法而是创建多个MouseEvent.为此,您需要在每次需要单击时创建一个MouseEvent.
function clicker(el,clickCount) {
var mousedownEvent;
while(clickCount--) {
mousedownEvent = document.createEvent("MouseEvent");
mousedownEvent.initMouseEvent("click",true,window,null,false,null);
el.dispatchEvent(mousedownEvent);
}
}
clicker(a,3);
// your anchor 'a' gets clicked on 3 times.
但是,在Chrome中使用此方法时,您会收到来自浏览器的警告,询问“此网站正在尝试下载多个文件.您要允许此操作吗？[拒绝] [允许]”.因此,如果您在扩展程序的后台页面中执行此操作,则后台页面会收到警告,用户无法看到它,因此用户无法单击“允许”.
(粗略/讨厌)解决方法是创建一个“点击”锚点的选项卡.像这样的东西：
function _anchorDownloader(url,filename) {
var timeout = 500;
return 'javascript:\'<!doctype html><html>'+
'<head></head>' +
'<script>' +
'function initDownload() {'+
'var el = document.getElementById("anchor");'+
'el.click();' +
'setTimeout(function() { window.close(); },' + timeout + ');' +
'}'+
'</script>' +
'<body onload="initDownload()">' +
'<a id="anchor" href="' + url + '" download="'+ filename + '"></a>'+
'</body>' +
'</html>\'';
};
function downloadResource(info,tab) {
// ...
chrome.tabs.create( { 'url' : _anchorDownloader( url,filename ),'active' : false } );
// ...
}
chrome.contextMenus.create({"title": "Save Image…","contexts":["image"],"onclick": downloadResource });
为此,扩展必须将“tabs”作为manifest.json中的权限.您可以调整超时以关闭选项卡,但是,如果您关闭它太快,则不会发生下载.
