JavaScript click（）方法在Chrome扩展中只工作一次_Javascript_Jquery_Google Chrome_Google Chrome Extension_Content Security Policy

JavaScript click（）方法在Chrome扩展中只工作一次

javascript jquery google-chrome google-chrome-extension

JavaScript click（）方法在Chrome扩展中只工作一次,javascript,jquery,google-chrome,google-chrome-extension,content-security-policy,Javascript,Jquery,Google Chrome,Google Chrome Extension,Content Security Policy,我正在尝试在Chrome扩展中下载多个文件。下面的代码创建指向文件的虚拟链接，然后触发下载文件的.click（）事件。问题是只有第一个.click（）事件触发下载。将忽略后续的.click（）事件这里是manifest.json： { "name": "Simple File Downloader", "version": "0.1", "permissions": ["contextMenus", "http://*/"], "background": { "per

我正在尝试在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
}

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"});
});

这里是sample.js：

{
  "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
}

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中描述的下载文件的不同方法，结果完全相同，第一个文件下载，第二个文件不下载
如中所述添加超时，导致违反内容安全策略，我尝试使用中所述的方法解决此问题，但没有成功
使用中描述的jQuery.live方法也没有成功，但我不能100%确定我是否正确实现了这个方法（如果人们认为这种方法应该解决这个问题，可以稍后发布代码）

很惊讶为什么简单地保存多个文件如此困难。谢谢你的帮助

请尝试

.on（）

这里是技巧不是使用

元素。单击方法，而是创建多个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中使用此方法时，浏览器会发出警告：“此网站正在尝试下载多个文件。是否允许此操作？[Deny][allow]”。因此，如果在扩展的后台页面中执行此操作，后台页面将收到警告，用户无法看到它，因此用户无法单击“允许”
一个（严重/讨厌的）解决方法是创建一个“单击”锚的选项卡。大概是这样的：
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 });

函数\u anchorDownloader（url、文件名）{
var超时=500；
返回“javascript:\”+
'' +
'' +
'函数initDownload（）{'+
'var el=document.getElementById（“锚”）；'+
'el.click（）；'+
'设置超时（函数（）{window.close（）；}，+timeout+'）；'+
'}'+
'' +
'' +
''+
'' +
'\'';
};
函数下载资源（信息，选项卡）{
// ...
create（{'url'：anchorDownloader（url，文件名），'active'：false}）；
// ...
}
create（{“title”：“Save Image…”，“contexts”：[“Image”]，“onclick”：downloadsource}）；

为此，扩展必须在manifest.json中具有“tabs”
作为权限。您可以调整超时以关闭选项卡，但是，如果关闭太快，则不会进行下载。
等待几个月，API将广泛可用。关于CSP错误：a
是一个链接，其toString
属性返回链接的目标。因此，如果使用setTimeout（a，300），它尝试评估链接的目标。默认情况下，字符串作为代码求值是禁止的，因此会出现错误。如果使用setTimeout（函数（）{a.click（）；}，300），但该文件仍无法下载。是否找到解决此问题的临时解决方案？我认为不可能存在安全问题。如果可能的话，我几乎可以用一次点击打开无限弹出/下载。由于围绕这个问题的活动再次出现，我最终做了以下几点：我按照Rob W的建议，使用了chrome.downloads.download（DownloadOptions，function callback）方法。它工作得很好。我的Chrome扩展只供内部使用，所以每个使用它的人都会使用Chrome Canary（）。我没有使用扩展（只是将代码片段粘贴到控制台），但我使用了el.dispatchEvent（clickEvent）
（请参见zertosh的答案），并结合setTimeout（function（）{download_next（）}，500）
。500ms是合理的；当使用100毫秒或更短的时间时，一些文件没有下载。感谢您的提示，但不幸的是这没有帮助。我对此寄予厚望，但Chrome似乎仍在阻止多个分派事件。我不想在同一个链接上“点击”三次，而是三次不同的链接，甚至不一定在同一页上。我想我明白你的意思。在元素上尝试MouseeEvent/dispatchEvent，但不在文档中追加/删除它。因此，只需创建它、分配属性并分派事件，而无需附加/删除。我刚刚在Chrome 25.0.1364.172上试用过，它对我很有效。有没有办法创建一个元素而不添加它？createElement（）似乎同时执行这两项操作。createElement创建一个元素，但不将其添加到DOM中。只需省略document.body.appendChild（a）和document.body.removeChild（a）。好的，所以我已经不添加它了。最初的问题不是我的，但我确实安排了赏金。我的代码非常简单，但在25.0.1364.172上仍然不起作用