CHROME ext/app - 单击即可下载图片答案

【问题标题】：CHROME ext/app - single click for image downloadCHROME ext/app - 单击即可下载图片
【发布时间】：2014-03-08 08:29:57
【问题描述】：

我想要一个简单的 Chrome 应用程序或 Ext 来更快地下载图像。目前，您必须右键单击并选择另存为等。

我看过这个接近的应用程序（https://chrome.google.com/webstore/detail/save-image-to-downloads/enjefpkmlibebgbbgidmhpmjhcdffhfm?hl=en）。

清单：

{
   "background": {
      "scripts": [ "save_to_downloads.js" ]
   },
   "description": "Adds a right-click direct download item for images, like Safari.",
   "icons": {
      "128": "icon128.png",
      "16": "icon16.png",
      "48": "icon48.png"
   },
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDXdc9crODeqJcWfwjo671hou/LWYzRmQFi/k/uwGE2Z1ARkm/NAIXS0amsfqCzb2FRJuw9exHGH1E98zotxW94zOY+UesJ4bz9SQT3NTcDcqmB2l1UhHRL0dCXVMig7LZyVyOO8FeBQZULzplF9MylZfBRER+L+d1HN186FFf+9QIDAQAB",
   "manifest_version": 2,
   "name": "Save Image to Downloads",
   "permissions": [ "downloads", "contextMenus" ],
   "update_url": "http://clients2.google.com/service/update2/crx",
   "version": "1.0.5"
}

save_to_downloads.js：

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>\'';
};

// A generic onclick callback function.
function downloadResource(info, tab) {
  var url = info['srcUrl'];
  console.log("url: " + url);
  var filename = url.substring(url.lastIndexOf('/')+1);
  if (chrome.downloads) {
    chrome.downloads.download({ url: url, filename: filename, saveAs: false });
  } else {
    var a = document.createElement('a');
    a.href = url;
    a.download = filename;
    // a.click();
    chrome.tabs.create( { 'url' : _anchorDownloader( url, filename ), 'active' : false  } ); // gets around the download limit
  }
}

// Register the contextual menu
chrome.contextMenus.create({"title": "Save Image to Downloads…", "contexts":["image"], "onclick": downloadResource});

这可以使用右键单击和上下文菜单选项下载到默认文件夹。

有没有人知道一种方法可以稍微改变它，以便它使用鼠标单击（例如 ALT+右键单击）而不是上下文菜单来下载？

谢谢

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

您可以使用内容脚本将脚本注入到您想要该功能的页面中：

https://developer.chrome.com/extensions/content_scripts

在您的内容脚本中，您需要为“click”添加一个事件侦听器，该侦听器查看您传递的 MouseEvent 并查看“altKey”属性是否设置为 true。如果是这样，您可以进行下载。

请注意，许多扩展 API 只能从扩展自己的页面（例如背景页面、浏览器操作弹出窗口等）调用，而不能直接在内容脚本中调用。因此，在这种情况下，您可能需要使用消息传递 API 让内容脚本向您的后台页面发送一条消息，其中包含要下载的图像的 URL。有关详细信息，请参阅https://developer.chrome.com/extensions/messaging。

【讨论】：

感谢您的帮助。你能提供一些代码来帮助我吗？