CHROME ext/app - single click for image download

问题

I would like a simple Chrome App or Ext to download images faster. Currently, you have to right click and choose save as, etc.

I have looked at this APP which came close (https://chrome.google.com/webstore/detail/save-image-to-downloads/enjefpkmlibebgbbgidmhpmjhcdffhfm?hl=en).

Manifest:

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

This works using the right click and a context menu option to download to the default folder.

Does anyone know a way to change this slightly so that it uses a mouse click (e.g. ALT+right click) to download instead of the context menu?

Thanks

回答1:

You can do this using a content script to inject script into the pages where you want the functionality:

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

Inside your content script, you'll want to add an event listener for 'click' that looks at the MouseEvent you get passed and sees if the 'altKey' property is set to true. If so, you can then do the download.

Note that many of the extension APIs are only available to be called from an extensions own pages (eg the background page, browser action popups, etc.) and not directly in the content script. So in this case what you may need to do is use the messaging API to have the content script send a message over to your background page with the URL of the image to download. See https://developer.chrome.com/extensions/messaging for more details.

来源：https://stackoverflow.com/questions/22124336/chrome-ext-app-single-click-for-image-download

标签

javascript

google-chrome

google-chrome-extension