6

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

私はもう試した：

複数のファイルを単純に保存するのがなぜそんなに難しいのか、驚きました。どんな助けにも感謝します。

4

2 に答える 2

5

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 でこの方法を使用すると、ブラウザから「このサイトは複数のファイルをダウンロードしようとしています。これを許可しますか? [拒否] [許可]」という警告が表示されます。したがって、拡張機能のバックグラウンド ページ内でこれを行うと、バックグラウンド ページは警告を受け取り、ユーザーはそれを見ることができないため、ユーザーは [許可] をクリックする方法がありません。

(グロス/厄介な) 回避策は、アンカーを「クリック」するタブを作成することです。このようなもの：

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れている必要があります。タイムアウトを調整してタブを閉じることができますが、閉じるのが速すぎるとダウンロードが行われません。

于 2013-03-13T16:05:20.313 に答える
0

.live()推奨されなくなったメソッドを使用する代わりに、試してみてください.on()

$(document).on("click", "a", function( event ){
    // do whatever
});

ここにドキュメントがあります

于 2012-12-25T21:03:28.053 に答える