Bluesky Image/Video Download Button

Adds a download button to Bluesky images and videos. Built off coredumperror's script with a few improvements.

< Feedback on Bluesky Image/Video Download Button

Review: Good - script works

§
Posted: 2024.10.21.
Edited: 2024.10.21.

Should be noted that videos are not supported.

The current targetNode selector (L95) seems to be broken, most likely as you mention due to a change in their structure. After fixing it, works great.

        // targetNode = node.querySelector('.r-1d5kdc7 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)');
        targetNode = node.querySelector('.r-1d5kdc7 .css-146c3p1.r-1xnzce8 + div'); // Single post page
        if(!targetNode) {
            targetNode = node.querySelector("div.r-1ljd8xs:nth-child(2)"); // Multiple post page (account, search)
        }

This uses adjacent sibling selector (+) on the text of the post since image container div is right after it for single post page. On multiple post pages div.r-1ljd8xs:nth-child(2) contains all the listed posts.

§
Posted: 2024.10.21.
Edited: 2024.10.21.

Updated to support switching between Posts/Replies/Media:

                // targetNode = node.querySelector('.r-1d5kdc7 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)');
                targetNode = node.querySelector('.r-1d5kdc7 .css-146c3p1.r-1xnzce8 + div'); // Single post page
                if(!targetNode) {
                    targetNode = node.querySelector("div:has(> div.r-1ljd8xs)"); // Multiple post page (account page)
                    if(!targetNode) {
                        targetNode = node.querySelector("div.r-1ljd8xs:nth-child(2)"); // Multiple post page (search results)
                    }
                }
§
Posted: 2024.10.21.
Edited: 2024.10.21.

Actually, just

        // targetNode = node.querySelector('.r-1d5kdc7 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)');
        targetNode = node.querySelector(".r-1d5kdc7");

Seems to work. Not as performant as a more precise selector to place the observer on but at least it works on single post pages, account page tabs, home page tabs, and search! And it doesn't seem to introduce unwanted download buttons.

§
Posted: 2024.10.21.

Nvm actually needs to be the parent div due to how they seem to handle SPA page change (adding another .r-1d5kdc7 sibling)

                // targetNode = node.querySelector('.r-1d5kdc7 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)');
                targetNode = node.querySelector(".r-13awgt0:has(> .r-1d5kdc7)");

Post reply

Sign in to post a reply.