ehmorris / High-Resolution-Downloader-For-Instagram

A Chrome extension for easily downloading high resolution copies of any Instagram photo, video, or story.
GNU General Public License v3.0
88 stars 8 forks source link

Can the Download and Open in Tab buttons be made to show on mouseover? #16

Closed thinkpad4 closed 6 years ago

thinkpad4 commented 6 years ago

I would like to know if it is possible to have the Download and Open in Tab buttons appear when I mouse over the area or even if I just mouseover the image/video?

Actual Behavior

Currently I have to click on the image or video to have the buttons appear then I can click on either Download or Open in Tab. They don't show unless I first click somewhere on the image/video. This is very annoying for videos because it causes them to start playing and some videos are VERY loud.

Steps To Reproduce The Behavior

Here is a example https://www.instagram.com/p/BfGtt6fnQq2/ when the image loads I don't see the Download or Open in Tab buttons, I have to click on the image for them to appear. Then I can click on download

This is on Slimjet Version 14.0.16.0 (based on Chromium 57.0.2987.98) Win7 64bit

ehmorris commented 6 years ago

Hey, thanks for posting your question here. I understand that clicking can be annoying, and hadn't thought about the volume issue with videos before.

Executing the extension on mouseover may be challenging for performance reasons. Currently when you click on an image, the extension goes through the entire stack of elements at the click coordinates and filters it for media — it never runs unless you click on an image. To accomplish the buttons appearing on mouseover, the filtering operation would have to run every time the mouse moved, which may slow down your Instagram browsing experience. I think of the light nature of the extension now to be an advantage, and I worry that the UI appearing on mouseover may also be annoying to some users.

I'll try this modification and see how it performs.

thinkpad4 commented 6 years ago

I understand about not wanting to lag people but this extension has icons that show when you mouse over the image and it never caused lag for me. Sadly it doesn't work at the moment cause of the new Instagram update but maybe take a look and see how they implemented it https://chrome.google.com/webstore/detail/instag-downloader/jnkdcmgmnegofdddphijckfagibepdlb

thinkpad4 commented 6 years ago

Were you able to take a look at that extension to see how they made the icons appear with mouseover?

ehmorris commented 6 years ago

Yes and I know what you mean. When I work on this I'll link the PR to this issue.

thinkpad4 commented 6 years ago

Cool

ehmorris commented 6 years ago

I've created a test branch that shows the extension on hover. Seems to work pretty well, but I don't think I'll be updating the web store extension to work this way. One catch is that you still have to click an image to copy the url to your clipboard, since the browser limits this behavior to a direct user action.

To use this version of the extension, download the branch's build, and drag it into chrome://extensions.

thinkpad4 commented 6 years ago

@ehmorris When I drag it to the extensions page, I'm getting "Package is invalid: 'CRX_VERSION_NUMBER_INVALID'

ehmorris commented 6 years ago

I think I know what's wrong

ehmorris commented 6 years ago

Actually I can't reproduce this error — the crx works for me in Chrome 65.0.3325.181 on macOS 10.12.6. Try loading the build directory itself. Here's a zip file of the build directory from this branch.

To load the extension from this directory:

  1. Unzip the folder
  2. Go to chrome://extensions and enable developer mode
  3. Click "Load Unpacked"
  4. Select the unzipped folder