imgur-Extension icon indicating copy to clipboard operation
imgur-Extension copied to clipboard

Port to Firefox and Safari [$30]

Open williamparry opened this issue 8 years ago • 27 comments


There is a $30 open bounty on this issue. Add to the bounty at Bountysource.

williamparry avatar Sep 27 '17 07:09 williamparry

I've done a bit of work on the firefox port here, simply rehosting and viewing images on the main.html page work fine, and the commit message details some of the current problems with the port that I noticed, but I'll list them again here:

  • Automatically copying to clipboard does not work (though clicking copy on the main.html page does)
  • The settings wheel in the top right of main.html doesn't do anything (however options can be accessed from the firefox extensions page)
  • Rehosting to a specific album is somewhat weird, if I rehost to my computer, the rehosted image appears in both my computer and my account's views. I didn't test this too heavily however.

chrhasse avatar Oct 04 '17 07:10 chrhasse

Awesome. Looks like you're also updating the Chrome version to be the latest - e.g. selected -> active, which is great.

Re: Clipboard - it looks like Firefox doesn't support it:

You can write to the clipboard like this in all execution contexts except background pages. In Firefox you can't select text or focus an input field in background pages, so you can't write to the clipboard from a background page.

So I'm happy to deprecate that feature for Firefox users until we can figure out a workaround.

Re: Settings wheel - This is because <dialog> isn't supported in Firefox but it looks like there's a polyfill.

Re: Rehosting - interesting. When you've got it stable I'll clone and play around. There's quite a lot of info in the console logs that might be helpful.

williamparry avatar Oct 04 '17 11:10 williamparry

Good find on the polyfill, I had hacked a solution in the other day, but it required a flag in about:config, which is definitely not ideal. I implemented the polyfill solution here.

I'm doing my best to keep the extension supported in both chrome and firefox with the same code base, but with this code the chrome version will use the dialog-polyfill.css for dialog elements as well rather than whatever's built in. It looks the same either way though, so it probably doesn't matter.

Copying to the clipboard is my next priority, since I'm doing this port for the selfish reason that I switched to firefox and don't want to live without this extension, and that's a feature I really like. I've got a couple ideas I'd like to try before giving up on it at least, if nothing else an option to open a page with a copy link button that closes after pressing it might be better than pure deprecation.

I also noticed that when right clicking an image the rehost menu becomes nested, in an "Imgur community extension" context menu item, with an empty "imgur" item and the "rehost image" item. Simple fix there just add a context to the "imgur" item.

chrhasse avatar Oct 05 '17 08:10 chrhasse

Off the top of my head maybe there's some loopback way we could do the clipboard: injecting a snippet of code onto the active tab and trigger the copy text there?

williamparry avatar Oct 05 '17 08:10 williamparry

That's pretty much my ideal solution. I'll play with it for a bit, see how it goes.

Just to have it written down here's what for sure doesn't work right now:

  • Copy Area
  • Rehost to this computer rehosts to account
  • Copy to clipboard

chrhasse avatar Oct 05 '17 08:10 chrhasse

Cool. FYI in the dev branch I added a feature for when you're browsing the imgur galleries on imgur.com whereby it autoloads images in comments:

https://github.com/williamparry/imgur-Extension/blob/dev/src/js/inject/showImages.js

williamparry avatar Oct 05 '17 08:10 williamparry

Looks like this works for copying to the clipboard. The check to figure out if it's running in firefox might be slightly overkill, but it works in both chrome and firefox still. I've got it to sort of a "good enough for me" point and while I do plan to work on it some more, it'll probably be a few days before I can dig into it and figure out the last two bugs I know of as well as merge the dev branch into it.

chrhasse avatar Oct 05 '17 09:10 chrhasse

oh actually I just realized that it doesn't load more pictures when you scroll down. This bug is actually in chromium too, not sure about regular chrome. I had fixed this with the old Metronomik version like this. I suppose I should note now that I'm running Firefox 57 b5 and Chromium Version 61.0.3163.79 on Ubuntu 17.04 64 bit and those are where I've done 100% of my testing.

chrhasse avatar Oct 05 '17 09:10 chrhasse

That clipboard code looks fine to me, and if most of the APIs are cross-browser with the odd variance then inline browser checks are fine.

With the loading, I haven't had a problem with regular chrome, but I'm happy to roll that fix in.

I'll clone your repo and test in FF today - cheers.

williamparry avatar Oct 05 '17 09:10 williamparry

I got it running. There's a couple of things:

  • That select box for albums is ugly af - we might have to write something custom for that
  • The Tab capture doesn't handle retina: https://i.imgur.com/aiLNnCs.png, but I can look at that - probably just a dpi prefixing problem

When you're ready do you want to fold this into the main repo?

williamparry avatar Oct 05 '17 10:10 williamparry

Sure, like I said, I'm going to be busy for a few days so I'll just send a PR with what I've committed so far which I think is a very good start.

chrhasse avatar Oct 05 '17 10:10 chrhasse

Great - could you submit the PR to the dev branch rather than master?

williamparry avatar Oct 05 '17 12:10 williamparry

Done.

chrhasse avatar Oct 05 '17 12:10 chrhasse

That's one for your Hacktoberfest tally ;)

williamparry avatar Oct 05 '17 12:10 williamparry

I wound up with a bit of time to look at the rehosting issue. The problem appears to be that since the extension has the <all_urls> permission, XMLHttpRequests are treated as same origin, which means cookies are sent even with xhr.withCredentials = false. I haven't had any luck preventing this behavior. The fetch api has an option to completely omit credentials, but it's not really a drop in replacement for XMLHttpRequest as request progress reporting is currently limited. We could probably hack around it by modifying headers in webRequest.onBeforeSendHeaders but that doesn't seem like the ideal solution to me.

chrhasse avatar Oct 05 '17 23:10 chrhasse

Just confirming I'm getting that error too. I'll look into it also.

williamparry avatar Oct 07 '17 06:10 williamparry

I've just committed a whole bunch of code and a new build system to help with firefox/chrome stuff, and changed the way it does auth.

I was investigating the webRequest stuff and I reckon we can just go with fetch. WebExtensions are only supported in latest Firefox and fetch has been in Chrome since 42. Are you OK to look at implementing it?

It might be connected to this issue: https://github.com/williamparry/imgur-Extension/issues/46

williamparry avatar Oct 25 '17 23:10 williamparry

Yeah I'll take a shot at it as soon as I can

chrhasse avatar Oct 26 '17 06:10 chrhasse

Great. I'm keen to push out a new version soon - do you think you'll get a chance over the next week to look at it?

williamparry avatar Oct 31 '17 13:10 williamparry

I think this commit should do it. I don't have a ton of experience with promises so I'm not 100% sure if the inner promise's error will filter up to the outer promise's error handler or if I need a second catch in there. I'll be looking into that a bit more soon. I also only changed the unauthenticated model to use fetch,and left everything else to XMLHttpRequests since they seem to be working fine and have feedback for upload progress.

I did test with chromium 62, and while I don't experience #46 with my code, I can't log in to my account within the extension. For some reason the validate callback on line 629 of background.js isn't getting a url, so url.split is an exception.

chrhasse avatar Nov 01 '17 02:11 chrhasse

I've also updated my fork with your latest changes, and it seems like Firefox at least needs the clipboardWrite permission in order to copy to the clipboard even with browser.tabs.executeScript.

chrhasse avatar Nov 01 '17 07:11 chrhasse

With chromium, do you get the authentication popup?

With firefox clipboard, it looks like we'll need to ask for that permission on demand - I'm trying to limit as many initial permissions as possible.

williamparry avatar Nov 01 '17 08:11 williamparry

Yeah the page pops up, I enter my email and password, if it's wrong it rejects it, if it's right the window closes and nothing happens and an error is logged in the console about not being able to call split on undefined. I tried opening the oauth url manually, and when I logged in, I got a json response from imgur saying that the redirect uri was invalid, so that's probably where I'd start.

chrhasse avatar Nov 01 '17 08:11 chrhasse

The redirect depends on the application id - I just added a fixed key (like there is in Firefox) to the chrome manifest and updated the redirect uri for the imgur api app. Could you give it a whirl?

williamparry avatar Nov 01 '17 08:11 williamparry

Perfect, that worked, thank you.

chrhasse avatar Nov 01 '17 09:11 chrhasse

I was trying to get the granular permissions working for Firefox but it looks like it's currently broken on their end.

If you go to the permissions request page it says that it can be invoked from:

selecting its context menu item

However adapting their permissions example to include:

background.js

chrome.contextMenus.onClicked.addListener((obj, tab) => {
  browser.permissions.request({permissions: ["history"]})
});

chrome.contextMenus.create({
  "id": "test",
  "title": "test",
  "contexts": ["page"]
});

manifest.json

"permissions": [
    "contextMenus",
    "tabs"
]

Will give this error in the debug console:

win.PopupNotifications is undefined

FYI I'm on macOS High Sierra

williamparry avatar Nov 01 '17 21:11 williamparry

Chrome version is ready for testing, but for Firefox we'll need to set up a proxy to handle the refresh token call since it needs the client secret to do it. If someone has AWS credits, we could set up a box to do it?

williamparry avatar Jan 03 '18 16:01 williamparry