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
956MB · Jan 8, 2025 · ccae70d · ccae70d
1 parent d61b11b
commit ccae70d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",