From ccae70d29d6a8d754a296d0c5c5e053644d39428 Mon Sep 17 00:00:00 2001 From: 956MB Date: Wed, 8 Jan 2025 07:20:41 -0600 Subject: [PATCH] Fix: post container not found, look for `div.shreddit.post-container` - Fixed issue where the download button wasn't being added to the post container because the classes of the div were changed. We now look for `div.shreddit-post-container` to make sure we have a place to insert the button --- CHANGELOG.md | 6 ++++++ README.md | 4 ++-- content.js | 41 +++++++++++++++++++++++------------------ manifest.json | 2 +- 4 files changed, 32 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ff1c34..c002443 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to the `Reddit Download Buttons` extension will be documented in this file. +## 1.3.4 - 2025-01-08 + +##### Fixed + +- Fixed issue where the download button wasn't being added to the post container because the classes of the div were changed. We now look for `div.shreddit-post-container` to make sure we have a place to insert the button. + ## 1.3.3 - 2024-12-12 ##### Fixed diff --git a/README.md b/README.md index 27f4187..25675ef 100644 --- a/README.md +++ b/README.md @@ -76,11 +76,11 @@ The browser extension that I've always wanted for Reddit... download buttons for ## Changelog -[1.3.3](./CHANGELOG.md#133---2024-12-12) - 2024-12-12 +[1.3.4](./CHANGELOG.md#134---2025-01-08) - 2025-01-08 ##### Fixed -- Fixed issue where single image downloads from inside gallery carousel would not work and user would get "Error: Could not find post content" or "No media found to download" alert. Caveat: Reddit seems to have a bug with the gallery carousel where it's keeping all the images as visible ("visibility: visible") when clicking forward/back. This is causing all images up to the index you've cliked to be downloaded. +- Fixed issue where the download button wasn't being added to the post container because the classes of the div were changed. We now look for `div.shreddit-post-container` to make sure we have a place to insert the button. For a full list of changes and past versions, please see the [CHANGELOG.md](CHANGELOG.md) diff --git a/content.js b/content.js index f50ce93..c202066 100644 --- a/content.js +++ b/content.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Reddit Download Buttons // @description Adds buttons to easily download images/videos from Reddit -// @version 1.3.3 +// @version 1.3.4 // @author Alexander Bays (956MB) // @namespace https://github.com/956MB/reddit-download-button // @match https://*.reddit.com/* @@ -125,9 +125,14 @@ const postId = post.id, shadowRoot = post.shadowRoot; if (!shadowRoot) return; - const targetDiv = shadowRoot.querySelector("div.flex.flex-row.items-center.flex-nowrap.overflow-hidden.justify-start"); - if (!targetDiv) return; - if (targetDiv.querySelector(".reddit-image-downloader-button-post")) return; + let postContainer = shadowRoot.querySelector("div.flex.flex-row.items-center.flex-nowrap.overflow-hidden.justify-start"); + if (!postContainer) { + postContainer = shadowRoot.querySelector("div.shreddit-post-container"); + if (!postContainer) return; + if (postContainer.querySelector(".reddit-image-downloader-button-post")) return; + } else { + if (postContainer.querySelector(".reddit-image-downloader-button-post")) return; + } const mediaContainer = post.querySelector('div[slot="post-media-container"]'); if (!mediaContainer) return; @@ -152,12 +157,12 @@ } const insertAfter = (targetElement) => { buttons.reverse().forEach(button => targetElement.insertAdjacentElement("afterend", button)) }; - const shareBtn = targetDiv.querySelector('slot[name="share-button"]'); + const shareBtn = postContainer.querySelector('slot[name="share-button"]'); if (shareBtn) { insertAfter(shareBtn); } else { - const awardBtn = targetDiv.querySelector("award-button")?.nextElementSibling?.nextElementSibling; + const awardBtn = postContainer.querySelector("award-button")?.nextElementSibling?.nextElementSibling; if (awardBtn) { insertAfter(awardBtn); } else { @@ -171,7 +176,7 @@ const lightbox = document.getElementById("shreddit-media-lightbox"); if (!lightbox) return; if (lightbox.querySelector(".reddit-image-downloader-button-lightbox")) return; - + const closeButton = lightbox.querySelector('button[aria-label="Close lightbox"]'); if (!closeButton) return; @@ -189,8 +194,8 @@ if (!buttonContainer) return; if (buttonContainer.querySelector(".reddit-image-downloader-button-bottom-bar")) return; - const downloadButton = createDownloadButton(bottomBar.getAttribute("permalink"), { - count: 1, + const downloadButton = createDownloadButton(bottomBar.getAttribute("permalink"), { + count: 1, type: 'Image', isPreview: true }); @@ -211,10 +216,10 @@ const parts = element.alt.split(" - "); return parts.length > 1 ? parts[1].trim() : parts[0].trim(); } - - const title = element.querySelector('h1[id^="post-title-"]')?.textContent.trim() || - element.getAttribute("post-title") || - "Untitled"; + + const title = element.querySelector('h1[id^="post-title-"]')?.textContent.trim() || + element.getAttribute("post-title") || + "Untitled"; return title; }; @@ -259,15 +264,15 @@ let urls = [], indexes = [], extension = ".png"; if (postId && postId.startsWith('/r/')) { - const content = document.querySelector('faceplate-tracker zoomable-img img') || - document.querySelector('faceplate-tracker zoomable-img video'); - + const content = document.querySelector('faceplate-tracker zoomable-img img') || + document.querySelector('faceplate-tracker zoomable-img video'); + if (content) { const urls = [content.src]; const titleMatch = postId.match(/\/([^/]+)\/$/); const postTitle = titleMatch ? titleMatch[1] : "untitled"; const extension = (content.tagName === 'VIDEO') ? '.mp4' : '.png'; - + await downloadQueue(urls, [], postTitle, extension, false, false, btn); return; } @@ -433,7 +438,7 @@ }; const init = () => { - console.log(`Reddit Image Downloader v1.3.3 Init`); + console.log(`Reddit Image Downloader v1.3.4 Init`); console.log("- https://github.com/956MB/reddit-download-button"); addButtons(); new MutationObserver(() => addButtons()).observe(document.body, { childList: true, subtree: true }); diff --git a/manifest.json b/manifest.json index 1485cfc..1836599 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Reddit Download Buttons", - "version": "1.3.3", + "version": "1.3.4", "description": "Adds buttons to easily download images/videos from Reddit", "permissions": [ "activeTab",