Skip to content

[userscript] Adds buttons to save images and videos in Twitter, also does some other enhancements. (Twitter image and video downloader)

License

Notifications You must be signed in to change notification settings

AlttiRi/twitter-click-and-save

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

This userscript allows you to save media content (images, videos) from Twitter's tweets by just a click on a button which appears over the media in tweets.

The content saves (downloads) with the most appropriate filename. The userscript also keeps the download history, so you will not download some media twice if you do not want it.

Additional enhancements

  • Makes links direct in tweets and in the browser title
  • Highlight visited links
  • Automatically expands spoilers
  • Hides: sign up bar, sign up section; trends; topics to follow

Installation

An installed userscript manager browser extension is required.*

To install just do two clicks:

  1. Click on this link (to install it from greasyfork)
  2. Confirm the installation in your usersript manager.

*For example: Tampermonkey Chrome image by Google Firefox image by Mozilla Foundation, Violentmonkey Chrome image by Google Firefox image by Mozilla Foundation, Greasemonkey Firefox image by Mozilla Foundation.


Let's look

https://twitter.com/SpaceX/status/1418667693016711170

It adds a colored download button to the left upper corner of a media. It appears only when you hover mouse pointer over the tweet. The red button means you did not save this image (or video), green — you have downloaded it right now, blue — the media is already saved.

Note: the green button does not disapper after the mouse leave the tweet in order to easier counting that you have downloaded right now.

Filename format

I sure this userscript saves files with the best filename.

The filename pattern looks so: [twitter] {author}—{YYYY.MM.DD}—{id}—{filename}.{extension}.

The examples:

  • [twitter] SpaceX—2020.05.04—1257328055816601600—EXLtL49UYAA7vCG.jpg
  • [twitter] SpaceX—2021.03.30—1376902938635870209—Exu93-nU8AAMAiC.jpg
  • [twitter] SpaceX—2021.07.20—1417288642662338564—E6s4ZjGUUAEInfM.jpg
  • [twitter] SpaceX—2021.07.23—1418667693016711170—E7AdwdkUYAAqxy3.jpg
  • [twitter] SpaceX—2021.09.16—1438552431021932551—E_bDyKvXMAAm4RV.jpg
  • [twitter] SpaceX—2021.09.16—1438552431021932551—E_bDyKvX0AQbi17.jpg

It's the perfect filename.

Why? Because it resolves the problem of file organization and includes a lot of useful information!

With this filename the downloaded files are already orginazed: with the default sorting by name (in a file explorer) the files will grouped by site, by user, by date and ordered by date and tweet ID. It's not a problem if the files are located in the differet folders. Just perform the seatch by [twitter] in a root folder to list all files which you have download with this userscript. Again, they will be grouped and sorted only due to name sorting. That's extremely useful thing!

You can easily find some media from the selected user in you local files (the media's author is credited in the filename), know when it was posted, and go to the tweet by pasting the tweet ID to https://twitter.com/_/status/{ID}. The "default" filename (for example, EXLtL49UYAA7vCG.jpg) is for "compatibility". For example, if someone shared with you a file with E7AdwdkUYAAqxy3.jpg filename you can check did you downloaded it just by the search in your local files.

The date format is YYYY.MM.DD. It's the only one proper format. It's unambiguous format. And it can be properly ordered by the sorting by name. The importans detail is it's UTC date. So the same file downloaded by people in different time zones will have the same filename.

[twitter], not just twitter? The first character as a special character (not a-zA-Z0-9) separates the downloaded files with the userscript from other files with "usual" names. And it looks nice, like a common tag.

Finally, "" character. Probably, it's the best character for separating purpose. It just one character (UTF-16), you do not need to add extra spaces around it to make it looks good. It's a rarely used character, that makes parsing easier.

@see gallery-dl config ↓

Addition enhancements (more details)

While the main purpose of the userscript is to be Twitter image and video downloader it also does some useful things:

Direct links: in tweets, in title and a:visited

image

Twitter replaces all outer links in tweets with redirect links like it: https://t.co/0MLMmDhZRx?amp=1 (https://example.com).

The userscript transforms redirect links to the original links.

While Twitter says that it's used for protection, but it's mostly used for the analytic purpose.

With the direct link you immitiatly see where it to goes (in the browser bottom corner), also you can copy exactly it with a context menu.

In addtional to it the userscript enables highlight of :visited links with darkorange color. So you can see did you visit the link before or not. (Note: it's based on the browser history which keeps visits within 3 months).

The more useful feature is that it also adds to t.co links in the title the original links.

For example, the default title:

Username on Twitter: "A test tweet. https://t.co/0MLMmDhZRx" / Twitter

transforms to

Username: "A test tweet. https://example.com/ (https://t.co/0MLMmDhZRx)"

It's very useful if you bookmark tweets. You can find the bookmarked tweet by searching of the site's name that was posted in the tweet, since the title is used as a bookmark's description.

And yes, I did not forget to add rel="nofollow noopener noreferrer" to the direct links (If you know what it is).

Automatic spoiler expanding

Profile and Media Spoiler

If you have no Twitter account and you visit a profile or watch tweets with media that were marked as "may include potentially sensitive content" it's starting to be a pain to expand spoilers by a click on "View" button each damning time.

This userscript does it automatically, instantly.

Unnecessary content hiding: sign up bar/section; trends; topics to follow

Screenshot

It hides the sign up bar and the sign up section which shows all time while you are not logged in.

(Note: of course, you able to log in/sing up in the front page or in the pop up that appers after you click on some button ("Like", "Follow"))

Screenshot

Finally, it hides "Trends" and "Topic to follow" by default. I find them useless, but you can do not agree with me, so it's not a big problem to disable this option. Just comment three related lines in the code in Features to execute section.

UPD. Hiding of the Sign Up bottom bar also hides "Messages" block. In additional, the hiding the bottom bar can disable auto playing videos that can be usefull. You need to set doNotPlayVideosAutomatically to true for that.

Messages


Gallery-dl config

This userscript is suited for single media downloading. If you want to download a balk of media, use gallery-dl.

To have the same filenames ↑ use the follow config:

"twitter": {
    "directory": ["[gallery-dl]", "[{category}] {author[name]}"],
    "filename": "[{category}] {author[name]}—{date:%Y.%m.%d}—{retweet_id|tweet_id}—{filename}.{extension}",
    "retweets": "original",
    "videos": true
}

Update: Since March 2022 Twitter now requires an account to watch NSFW content, so you need to use in gallery-dl either "auth_token" cookie from the browser where you are logged in, or "username" and "password". (It's optionally, if you are going to download NSFW content.)

    "cookies": {
        "auth_token": "ABCDEF"
    }

Only replace the example "auth_token"'s value with yours, or use "username" and "password" instead:

    "username": "admin",
    "password": "123"

The entire config file will look, for example, so:

{
    "extractor": {
        "base-directory": "./",
        "...": "...",
        "...": "...",
        "reddit": {
            "...": "..."
        },

        "twitter": {
            "directory": ["[gallery-dl]", "[{category}] {author[name]}"],
            "filename": "[{category}] {author[name]}—{date:%Y.%m.%d}—{retweet_id|tweet_id}—{filename}.{extension}",
            "retweets": "original",
            "videos": true,
            "cookies": {
                "auth_token": ""
            }
        },

        "tumblr": {
            "...": "...",
            "...": "..."
        }
    }
}

(Just replace the default settings for "twitter" in your %HOMEPATH%/gallery-dl.conf config file.)

Do not forget to add a comma (,) if you put this in the middle of the json file.

To download someone's media use (/media endpoint):

  • gallery-dl https://twitter.com/someone/media

If someone's has a lot of posts (more than 1000) use a search result downloading:

  • gallery-dl "https://twitter.com/search?q=from:someone"

Additional notes

  1. Some features are language dependent. Currently the script works fully with "en", "es", "ru", "zh", "ja". See getLanguageConstants function. You can add ?lang=en in the address bar to temporary change your language to check the work of the script.

  2. The script uses LocalStorage to keep the download history.

  3. If you see the [warning] Original images are not available. warning on the button:

    image

    it means that the original image orig, or 4096x4096 is not available.

    Possible reasons: the tweet containing the image was deleted, or some site issue (possibly, temporal — in this case try to download the image later).

Recommendations

  • Use uBlock Origin web extension for an advertisement blocking.
  • For bulk download use gallery-dl console program as mentioned above.
  • In Firefox I recommend to disable browser.download.alwaysOpenPanel in about:config in order to the download popup does not open each download.

If the script does not work

The userscript may do not work if you have set "Enhanced Tracking Protection" to "Strict" in Firefox ("Tracking content" option of the "Custom" preset) in about:preferences#privacy. Try to enable "Strict Tracking Protection Fix" in the userscript settings popup.