我正在尝试在 Chrome 扩展程序中下载多个文件。以下代码创建一个指向文件的虚拟链接，然后触发下载文件的 .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, true, window, 0, null, null, null, null, false , false, false, false, 0, null);
el.dispatchEvent(mousedownEvent);
}
}
clicker(a, 3);
// your anchor 'a' gets clicked on 3 times.
虽然在 Chrome 中使用此方法时，您会收到浏览器的警告，询问 “此站点正在尝试下载多个文件。您要允许吗？[拒绝] [允许]” .所以，如果你在一个扩展的后台页面中这样做，后台页面会收到警告，用户看不到它，所以用户没有办法点击“允许”。
(严重/讨厌的)解决方法是创建一个“点击” anchor 的选项卡。像这样:
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 });
为此，扩展必须在 manifest.json 中将 “tabs” 作为 permission。您可以调整超时以关闭选项卡，但是，如果您关闭它的速度太快，则不会发生下载。
关于JavaScript click() 方法仅在 Chrome 扩展程序中有效一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14033588/