Sunday, September 4, 2011

CloudDiff Chrome Extension


CloudDiff - Compare versions of your Dropbox or pCloud text files in-browser or using your configured diff tool.

Updates


2021-06-28 update (version 1.0.2.28) - Handle Dropbox failure earlier.  Button to clear Dropbox token.


I've written CloudDiff, a Chrome extension which allows you to compare different versions of text files you have on Dropbox or pCloud.  It can perform the diff in-browser, or trigger a diff tool you have installed on your local machine already, which you must configure.
  1. On the Dropbox website, browse to the "Version history" page of any text file.
  2. On the pCloud website, browse to the "Revisions" page of any text file.
  3. A "Diff" column has been added where you can select which two versions to compare.
  4. To trigger your already-installed diff tool, click the "Diff" button.
    1. If a diff tool is not yet configured, the Options page opens where you can specify one. If you don't have one installed already, one option is KDiff3. The setting is accessible from Tools > Extensions > CloudDiff > Options.
    2. An additional executable must be installed, CloudDiff Helper, in order to trigger your diff tool.  Follow the instructions to install.
    3. If configured correctly, your diff tool should open.
    4. To perform the diff in-browser, click the "Inline" button.
This should run on Windows, Mac, and Linux.  Note that the combined file-size limit in any comparison is 4GB.  Please let me know if any issues come up.

Get CloudDiff.

Privacy Policy


Release History


2020-06-01 update (version 1.0.2.27) - Upgrade to jQuery 3.5.1, CodeMirror 5.54.0.  Handle OAuth token expiration.  Fix pCloud caching behavior.

2020-05-08 update (version 1.0.2.26) - (never approved) Use Dropbox API to circumvent CORB issue; use the chrome.storage API to store OAuth access token.

2018-02-01 update (version 1.0.2.25) - Rename to "CloudDiff" (formerly "DropboxDiff") with a new Chrome Web Store extension ID -- be sure to update to latest CloudDiff HelperpCloud support.  Switch from jsdifflib to CodeMirror for inline diff.

2017-04-18 update (version 1.0.2.23) - Update to match latest Dropbox format change.

2017-03-13 update (versions 1.0.2.21-22) - Bug fix for diffing non-text files, and files larger than 4K; please get latest "CloudDiff Helper".

2017-01-26 update (version 1.0.2.20) - Implement "Ignore exit status" option.

2017-01-24 update (versions 1.0.2.17-19) - Updated installation instructions for Mac/Linux; bug fixes.

2017-01-21 update (version 1.0.2.16) - Support "Load older versions".


...

72 comments:

  1. Cool tool dude. Would be cool to see it as a firefox extension :p

    ReplyDelete
  2. @Robbie - will make a note of it; thanks for the comment.

    ReplyDelete
  3. Really nice work on the DropboxDiff Chrome Extension - it's so cool and a real time saver. I can't tell you how many times I've been downloading files from the dropbox website into a temporary folder, then running diffmerge on them. (btw this works great with diffmerge too). So thanks for an excellent extension!

    ReplyDelete
  4. I LOVE YOU!

    ReplyDelete
  5. It's broken on the new site... :(

    ReplyDelete
  6. @Anonymous - I was afraid of that. I'm still waiting for my Dropbox account to be upgraded; I'm still seeing the old version. I'll get a fix out as soon as I can.

    ReplyDelete
  7. Hey Vic, awesome little tool. Eagerly awaiting the fix for the new site...

    THANK YOU !!!

    ReplyDelete
  8. @Vic - try replacing the www.dropbox.com with www2.dropbox.com I know that since the upgrade this is the url i'm redirected to.

    ReplyDelete
  9. @Anonymous, yes I tried that but it still redirects.

    I contacted Dropbox Support, and this is what they told me:

    "We are currently rolling out the new redesign of the Dropbox gradually and don't offer the ability to upgrade user accounts to the new version. We should be upgrading most accounts in the very near future."

    If you want to help me out, could you send me the HTML source of one of your "previous versions" pages with DropboxDiff turned off? Then I'd know how to fix it.

    ReplyDelete
  10. Well it looks like my account finally updated to the latest version of the website. But the weird thing is, DropboxDiff still seems to work for me.

    Let me know if you are still seeing issues or not. If so, please email me the source of one of your "Previous versions" pages and I'll take a look.

    ReplyDelete
  11. Sounds awesome — but do you have any plans for a Safari version?

    ReplyDelete
  12. Re: Safari, no immediate plans, but I will look into it at some point. There is a chance it will be a better platform than Firefox, if its sandboxing is similar to Chrome's.

    ReplyDelete
  13. The Chinese characters become Garbled when I use dropboxdiff. but when I use kdiff3 along with the same files downloaded from dropbox, it works.

    please email me if you know the reason. Thank you in advance.

    meicale@163.com

    ReplyDelete
  14. Does this work on the lastest site?

    because I'm getting an error

    "Uncaught TypeError: Cannot read property 'cellIndex' of undefined chrome-extension://aefdkgcdokdiaoppobphjogcilaaakka/content.js:143
    (anonymous function) chrome-extension://aefdkgcdokdiaoppobphjogcilaaakka/content.js:143
    (anonymous function) chrome-extension://aefdkgcdokdiaoppobphjogcilaaakka/content.js:189
    "

    I can provide the full HTML of the page if you wish?

    ReplyDelete
  15. @Nathan - thanks for the heads up. Version 1.0.2.5 should fix this. Please let me know if it doesn't work for you.

    ReplyDelete
  16. Thanks for the update, but it's still not working, the diff radio boxes and command button appears.

    When I click compare (after selecting two files), my compare program (Beyond Compare) opens but the files are wrong.
    File 1 = "C:\Users\Nathan\AppData\Local\Temp\dropbox-diff\edited by nathanial davies"
    File 2 = ""

    I've run the debugger against your extension and grabbed the file object from the diff on click function hope this helps.

    files: Object
    is_valid: true
    left: Object
    changed: "↵ Edited by Nathanial Davies↵ ↵ (↵ Nathan-Work↵ )↵ ↵ "
    url: "https://dl-web.dropbox.com/get/path/path2/popup.js?w=a8f6068d&sjid=81473"
    __proto__: Object
    right: Object
    changed: "↵ Edited by Nathanial Davies↵ ↵ (↵ Nathan-Work↵ )↵ ↵ "
    url: "https://dl-web.dropbox.com/get/path/path2/popup.js?w=a8f6068d&sjid=81864"
    __proto__: Object


    I hope the formatting on that works, do you need any more info?

    Nathan

    ReplyDelete
  17. @Nathan, whoops, forget 1.0.2.5. Version 1.0.2.6 should work on Windows.

    ReplyDelete
  18. It's working brilliantly, thank you soo much.

    --
    Nathan

    ReplyDelete
  19. have you considered integrating it with an in-browser diff tool like this? https://github.com/austincheney/Pretty-Diff

    ReplyDelete
  20. @Jon, yes, it's in the queue. So far I was considering https://github.com/cemerick/jsdifflib but I'll take a look at Pretty-Diff too; thanks for the input.

    ReplyDelete
  21. Victor, great tool, I've used it for a few weeks now and it's been very helpful. I've now got windows 8 however and "This application is not supported on this computer. Installation has been disabled" at the chrome web store.
    Search reveals something about using Tincr and it no longer available from win8?

    Anyway, just a heads up.

    ReplyDelete
  22. @Sven, thanks! Yes, it appears this type of extension is not allowed in Windows 8, but supposedly you can work around it by running Chrome in compatibility mode for Windows 7. Something like: right-click the Chrome shortcut > Properties > Compatibility > "Run this program in compatibility mode for:". Reference is here (which you probably already saw).

    An in-browser diff tool is on my list of things to do, but I haven't been able to get around to it...

    ReplyDelete
  23. Test run from extension options page is ok. But got error when press Diff button on Dropbox site: http://clip2net.com/s/5AYaTi

    ReplyDelete
  24. @bruha, I'll look into it when I get the chance, probably this weekend.

    ReplyDelete
  25. @bruha, I do get that error once in a while; it seems that the event page gets deactivated after a period of inactivity. But if I try clicking Diff a second time, it usually works.

    I assume you are on the latest version of Chrome; what OS are you on? I tested on the latest version of Chrome on Windows 7, Mac 10.6, and Ubuntu 12.04.1.

    ReplyDelete
  26. I tried today and it works just fine. Maybe quistion was in browser restart. My OS is Win7x64 and Chrome 29.0.1547.57 m

    ReplyDelete
  27. Glad to hear, and thanks for the follow-up!

    ReplyDelete
  28. Victor,

    thank you - a great and useful tool!

    The more I am unhappy that it ceases to work after my latest system, Chrome and dropbox update (this morning) in ubuntu 12.04.

    The "Diff" button disappeared completely.

    I am not 100% sure whether the following console error is the cause of the problem, but it looks like a good hit:

    The JavaScript content.js breaks at line 121

    var sjid = REV_RE.exec(content)[2]

    Here, REV_RE is the expression

    /&(amp;)?sjid=([0-9]+)"/

    to be applied to the HTML of the cells of the current line, containing the hyperlink to the version with the href

    href="https://dl-web.dropbox.com/get/swepar/test_calc_reduce.c?sjid=157&_subject_uid=65286108&w=AABCNp-d5SB_Y3N9q_Y5J6mK463HIdPOdTayfbCHx25Jdw"

    As you see, this doesn't match, since the sjid now is the first query parameter, but the regex asks for a preceding &.

    Suggestion: Simplify REV_RE to

    REV_RE = /sjid=([0-9]+)/

    (and grab the first submatch then, of course:

    var sjid = REV_RE.exec(content)[1]
    )

    I have no idea why the order of the arguments in the version URL changed. But clearly it is allowed to change the order of query parameters in any way.

    Regards,
    Rüdiger

    ReplyDelete
  29. @Rüdiger, thanks for the detailed bug report! I just published version 1.0.2.12 which should address this issue; please let me know if it doesn't.

    ReplyDelete
  30. Victor, thanks for the quick update. Yes, it works again for me! (You were more "cautious" with the RegExp than I suggested... OK, it's your code after all :-) ). Regards, Rüdiger

    ReplyDelete
  31. Hi Victor, thanks for making this extension. It has been very helpful. Lately I have been getting an error:

    DropboxDiff failed with
    undefined
    The JavaScript console of DropboxDiff's "background.html" page may have more information.

    I am wondering if you can take a look at this. Thanks!

    ReplyDelete
  32. @Anonymous, it looks like NPAPI has finally been completely deprecated by Chrome as of September 2015: https://www.chromium.org/developers/npapi-deprecation. I will need to look into the alternatives available at some point. Sorry!

    ReplyDelete
  33. @Victor,

    The Chrome Webstore description says:
    Note that this extension requires access to "All data on your computer and the websites you visit" because the only way to trigger your locally-installed diff tool is through an NPAPI plugin.

    It also says:
    [DropboxDiff] Provides two options for comparing different versions of your Dropbox files: 1) a side-by-side diff within your browser, or 2) an external diff tool.

    Would you be willing publish a reduced version of DropboxDiff that supports only the option 1) "a side-by-side diff within your browser." Hopefully, this option does not require the NPAPI plugin.

    Thanks!

    ReplyDelete
  34. @Anonymous, good idea! I'll work on it when I get the chance.

    ReplyDelete
  35. Any updates!?

    ReplyDelete
  36. Ah yes, sorry. I got stuck while trying to implement an alternative around the NPAPI deprecation so I set this aside for a while. I'll take a look at doing just inline diff over the holidays.

    ReplyDelete
  37. Okay, DropboxDiff is back, somewhat at least. Inline diff is restored, but external diff is still to come.

    ReplyDelete
  38. External diff functionality restored.

    ReplyDelete
  39. Really want to use this, but it is just not working. Using Win7Pro with Chrome
    - Installed the Dropbox Diff extension and confirmed it is enabled
    - Installed the Dropboxdiff-Helper
    - Installed the kdiff3 tool, and made sure the command line points to the executable file, and confirmed kdiff3 opens when clicking the test button in the DropboxDiff Extension options.
    - confirmed that in Dropbox, at the Version History page, I get the Dropbox Diff info (radio buttons, etc.)

    However, when I select radio buttons for the left and right, and then click either "Diff" or "inline" nothing happens. Neither works.

    Any suggestions/ideas on what I may be doing wrong? I REALLY want this to work.

    ReplyDelete
  40. There are some extra error checking steps I need to add; hopefully this will reveal some issues. Thanks for the attempt and I'll keep you posted.

    ReplyDelete
  41. Okay I've just pushed 1.0.2.22 which fixes a bug when diffing non-plaintext files, and another one with files over 4K. Please reinstall the DropboxDiff Helper. Hopefully that was your issue, latest Anonymous. Also, there's some better error handling, so if that's not it, maybe it will shed some more light.

    ReplyDelete
  42. Dropbox changed their site again. I'm working on an update.

    ReplyDelete
  43. 1.0.2.23 released, which handles Dropbox's latest format change.

    ReplyDelete
  44. Hi - I must say a huge thank you for such a useful chrome extension.
    I'm personally thinking like a lot of Dropbox users in moving to pCloud (pCloud.com) as they now have the Public folder which was removed by Dropbox. Their rates are also competitive but what is stopping me is the loss of your Extension.
    Is there any chance that you could be porting a version to support the pCloud with there history.
    Thanks Jon

    ReplyDelete
  45. @Jon, thanks for commenting, and thanks for the tip about pCloud! I'll definitely look into supporting it, though it make take me a while. I'll try to post updates.

    ReplyDelete
  46. Latest update - I received a take-down notice from Dropbox for appropriating their name and logo, so I'm in the process of renaming the tool to "CloudDiff".

    In addition, I notice that the controls do not get injected into Dropbox pages until mousing over the filename column of the version history table; I'm looking into how to fix this.

    Lastly, https://www.pcloud.com support coming soon.

    ReplyDelete
  47. Hi Victor - It just proves how stupid and detached from their users some of these big corporations can be (I guess in reality it is some lawyers just making money for themselves). They should be paying you for promoting their product and enhancing its appeal) Keep up the good work and looking forward to the pcloud support.

    ReplyDelete
  48. Okay, rather than wait for the existing Chrome Extension to be restored I went ahead and created a new one for CloudDiff version 1.0.2.25. Be sure to download and install the latest CloudDiff Helper as well (to account for the updated extension ID).

    Enjoy!

    ReplyDelete
  49. Brilliant - I've tested it on both Dropbox and pCloud and it works great. Many thanks for your work on this. Just for anyone interested I'm using it with WinMerge. A really useful tool. There must be thousands of users that would find this so useful. Jon

    ReplyDelete
  50. Thanks for the great extension. Can you make it work for Google Drive too?

    ReplyDelete
  51. @Muhamad Said Fathurrohman, well, I can take a look! Thanks!

    ReplyDelete
  52. Hmmm,
    I'm not sure what I've done. But it doesn't work for me.
    There's no button to create the compare, nor are there the radio buttons to choose which version goes in the left or right pane. It's behaving as if it's no longer installed or disabled.
    Any idea what I might have done. Otherwise this is a really handy extension!

    ReplyDelete
  53. Hi - you don't say what you are using it with.
    Assuming its Dropbox - works great for me

    https://imgur.com/wIe0iJM

    is a screenshot of my extension settings
    Jon

    ReplyDelete
  54. Looks like Dropbox might be rolling out some changes. I'll keep an eye on it and hopefully have some time to look into it next week.

    ReplyDelete
  55. Good point Jon.
    I'm using it with dropbox.

    Maybe it's the changes that Victor has mentioned that have broken it for me.
    I'll wait patiently for his feedback!

    ReplyDelete
  56. So, I tried it again today (dropbox) . I had to sign in (unusual) and the buttons to choose the left and right file were there again.
    BUT no diff tool was chosen.
    As soon as I chose the diff tool (SVN merge) and retried. The options went away again.

    ReplyDelete
  57. @Unknown thanks for the testing! Sorry I haven't had a chance to look at this but very likely I will have time this weekend.

    ReplyDelete
  58. Well, I've diagnosed a few issues, 1) inconsistency in timing when adding the controls to the page, and 2) a CORB violation - basically a recent security enhancement in Chrome. I have a fix for the first but the second will take a bit more time; stay tuned.

    ReplyDelete
  59. Thanks Victor for the update - we appreciate your work and if there is anything I can do to help please let me know. Jon

    ReplyDelete
  60. Well I've submitted a request to Dropbox Support to implement the required changes to their server-side responses. Let's see what happens, but I'm not too hopeful.

    ReplyDelete
  61. Well the response was quick but the unfortunate - they're not willing to make the server-side changes on account of this making use of an unsupported and fragile "interface", while they already have a well-supported API.

    I will investigate using their official API but it will likely take a while to integrate.

    ReplyDelete
  62. Hi Victor,

    Just wondering if you have had a chance to look at the dropbox API.

    Is there anything I can help with

    Hope you are keeping safe - Jon

    ReplyDelete
  63. Heh, I was wondering if anyone was still trying to use this during this craziness.

    I'll take a look later this week!

    ReplyDelete
  64. Made some decent progress on the OAuth flow. The page-load mechanism seems to have changed again though, so I still need to figure that out.

    ReplyDelete
  65. Thanks Victor
    Looking at Dropbox - I found sometimes the elements from your extension were visible and sometimes not
    Also when the comparison was done the files were empty
    very short video at
    https://www.dropbox.com/s/yksv1zeze4v78gd/2020-05-07_11-46-39.mp4?dl=0
    If you want me to do anything please let me know
    Jon and thanks

    ReplyDelete
  66. @Jon, yah, the next update should fix that issue. Thanks for the help! I'll let you know if I think of some way you can help more.

    ReplyDelete
  67. Version 1.0.2.26 has been submitted but is pending review. Unfortunately there is no telling how long it will take to pass review, especially considering the current state of things.

    If you're itching to try it out you can install it yourself as a developer extension from https://github.com/vshih/CloudDiff. Hit me up if you run into problems.

    ReplyDelete
  68. Hi Victor,

    Trying it as a developer extension and loading as - I see it installed as 1.0.2.26
    https://i.imgur.com/XnXgUNu.png
    but I get stuck with the testing of the command with the Test button

    The command I use is "C:\Program Files\WinMerge\WinMergeU.exe" This works with 1.0.2.25 when you click the Test button
    But with 1.0.2.26 it doesn't display anything The Javascript function testConfig() { is running but not sure how that should run the winmerge
    It gets to the end of the function chrome.extension.sendMessage(ex_data, CloudDiff.exDiffResponseHandler); OK

    How should it Run the WinMerge - I see the code is different from 1.0.2.25 to 1.0.2.26
    Jon

    Jon Eskdale
    jon@eskdale.org

    ReplyDelete
  69. Is this perhaps because the helper is not running with the Production ID?

    ReplyDelete
  70. OK - so I changed the ID in the Manifest
    in location C:\Users\USERNAME\AppData\Local\CloudDiff Helper\manifest.json and now the Test button works and pCloud works most of the time but occasionally the comparison is not the correct files - The names at the top are correct but the contents are wrong (They are from a previous comparison)

    No success with Dropbox as I get an error

    Error (400)
    It seems the app you were using submitted a bad request. If you would like to report this error to the app's developer, include the information below.


    More details for developers
    Invalid redirect_uri. It must exactly match one of the redirect URIs you've pre-configured for your app (including the path).
    Thanks - Look forward to your comments
    Jon

    ReplyDelete
  71. @Jon great, you figured out the helper ID.

    Ok right the Dropbox app needs the chrome extension's ID but when you install as a developer extension it creates a new one. Let me figure out if there's something general I can put for local development.

    Barring that, you could send me the ID of your install in a personal message...

    ReplyDelete
  72. Thanks Victor - I don't know how I can send you a personal message.
    You have my email address in the earlier post.
    Where does the Dropbox app use the extension's ID, perhaps I could change it but I couldn't find it.
    Jon

    ReplyDelete