☰

Pitchfork Reviews with r/indieheads Comments from Reddit

Load and display Reddit comments from r/indieheads on Pitchfork album review pages.

  1. // ==UserScript==
  2. // @name         Pitchfork Reviews with r/indieheads Comments from Reddit
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Load and display Reddit comments from r/indieheads on Pitchfork album review pages.
  6. // @author       TA
  7. // @license      MIT
  8. // @match        https://pitchfork.com/reviews/albums/*
  9. // @grant        GM_xmlhttpRequest
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // --- Utility Functions (developed in previous steps) ---
  16.  
  17.     /**
  18.      * Extracts the Album Name from the Pitchfork page.
  19.      * @returns {string|null} The album name or null if not found.
  20.      */
  21.     function extractAlbumName() {
  22.         const albumElement = document.querySelector('h1[data-testid="ContentHeaderHed"]');
  23.         return albumElement ? albumElement.textContent.trim() : null;
  24.     }
  25.  
  26.     /**
  27.      * Extracts the Artist Name(s) from the Pitchfork page.
  28.      * @returns {string|string[]|null} The artist name(s) or null if not found.
  29.      */
  30.     function extractArtistName() {
  31.         const artistElements = document.querySelectorAll('ul[class*="SplitScreenContentHeaderArtistWrapper"] div[class*="SplitScreenContentHeaderArtist"]');
  32.         if (!artistElements.length) {
  33.             return null;
  34.         }
  35.         const artists = Array.from(artistElements).map(el => el.textContent.trim());
  36.         // Return a single string if only one artist, array if multiple
  37.         return artists.length === 1 ? artists[0] : artists;
  38.     }
  39.  
  40.     /**
  41.      * Formats artist and album names into Reddit search query strings.
  42.      * Returns separate queries for FRESH ALBUM and ALBUM DISCUSSION threads.
  43.      *
  44.      * @param {string|string[]} artistName The name of the artist(s).
  45.      * @param {string} albumName The name of the album.
  46.      * @returns {Object} Object with freshAlbumQuery and albumDiscussionQuery properties.
  47.      */
  48.     function formatAlbumSearchQueries(artistName, albumName) {
  49.         // If artistName is an array, join with ' & ' for the query
  50.         const formattedArtist = Array.isArray(artistName) ? artistName.join(' & ') : artistName;
  51.  
  52.         // Create simpler queries that are more likely to match
  53.         // Remove quotes and brackets which can cause search issues
  54.         const freshAlbumQuery = `FRESH ALBUM ${formattedArtist} ${albumName}`;
  55.         const albumDiscussionQuery = `ALBUM DISCUSSION ${formattedArtist} ${albumName}`;
  56.  
  57.         // Return both queries separately
  58.         return {
  59.             freshAlbumQuery,
  60.             albumDiscussionQuery
  61.         };
  62.     }
  63.  
  64.     /**
  65.      * Constructs a Reddit search URL for the r/indieheads subreddit's JSON API endpoint.
  66.      * Cleans the query by removing problematic characters like slashes and ampersands.
  67.      *
  68.      * @param {string} query The search query string.
  69.      * @returns {string} The constructed Reddit search JSON API URL.
  70.      */
  71.     function buildIndieHeadsSearchJsonUrl(query) {
  72.         // Clean the query by removing slashes, ampersands, percent signs, and plus signs with spaces
  73.         // that might interfere with the search functionality
  74.         const cleanedQuery = query
  75.             .replace(/[\/&%+]/g, ' ') // Replace slashes, ampersands, percent signs, and plus signs with spaces
  76.             .replace(/\s+/g, ' ')     // Replace multiple spaces with a single space
  77.             .trim();                  // Remove leading/trailing spaces
  78.  
  79.         const encodedQuery = encodeURIComponent(cleanedQuery);
  80.         const searchUrl = `https://www.reddit.com/r/indieheads/search.json?q=${encodedQuery}&restrict_sr=on&sort=relevance&t=all`;
  81.         return searchUrl;
  82.     }
  83.  
  84.     /**
  85.      * Identifies relevant Reddit thread URLs from search results based on title patterns.
  86.      * Processes FRESH ALBUM and ALBUM DISCUSSION results separately.
  87.      * Ensures no duplicate threads are added.
  88.      *
  89.      * @param {Array<Object>} freshAlbumResults The results from the FRESH ALBUM search.
  90.      * @param {Array<Object>} albumDiscussionResults The results from the ALBUM DISCUSSION search.
  91.      * @param {string} artistName The name of the artist(s).
  92.      * @param {string} albumName The name of the album.
  93.      * @returns {Array<Object>} An array of objects {title: string, url: string} for all matching threads.
  94.      */
  95.     function identifyRelevantThreads(freshAlbumResults, albumDiscussionResults, artist, albumName) {
  96.         const relevantThreads = [];
  97.         // Track URLs to avoid duplicates
  98.         const addedUrls = new Set();
  99.  
  100.         // Helper function to find the best thread from search results
  101.         const findBestThread = (results, threadType) => {
  102.             if (!results || !Array.isArray(results) || results.length === 0) {
  103.                 console.log(`No ${threadType} search results found.`);
  104.                 return null;
  105.             }
  106.  
  107.             console.log(`Processing ${results.length} ${threadType} search results.`);
  108.  
  109.             // Look for an exact match first
  110.             for (const item of results) {
  111.                 if (item.kind === "t3" && item.data && item.data.title && item.data.permalink) {
  112.                     const title = item.data.title;
  113.                     const url = "https://www.reddit.com" + item.data.permalink;
  114.  
  115.                     // Skip if we've already added this URL
  116.                     if (addedUrls.has(url)) {
  117.                         console.log(`Skipping duplicate thread: "${title}"`);
  118.                         continue;
  119.                     }
  120.  
  121.                     // Check if this is the right type of thread
  122.                     if (title.toLowerCase().includes(threadType.toLowerCase()) && 
  123.                         title.toLowerCase().includes(albumName.toLowerCase())) {
  124.                         console.log(`Found ${threadType} thread: "${title}"`);
  125.                         return { title, url };
  126.                     }
  127.                 }
  128.             }
  129.  
  130.             // If no exact match, take the first result that contains the album name
  131.             for (const item of results) {
  132.                 if (item.kind === "t3" && item.data && item.data.title && item.data.permalink) {
  133.                     const title = item.data.title;
  134.                     const url = "https://www.reddit.com" + item.data.permalink;
  135.  
  136.                     // Skip if we've already added this URL
  137.                     if (addedUrls.has(url)) {
  138.                         console.log(`Skipping duplicate thread: "${title}"`);
  139.                         continue;
  140.                     }
  141.  
  142.                     if (title.toLowerCase().includes(albumName.toLowerCase())) {
  143.                         console.log(`Found ${threadType} thread (partial match): "${title}"`);
  144.                         return { title, url };
  145.                     }
  146.                 }
  147.             }
  148.  
  149.             console.log(`No matching ${threadType} thread found.`);
  150.             return null;
  151.         };
  152.  
  153.         // Find the best thread for each type
  154.         const freshAlbumThread = findBestThread(freshAlbumResults, "FRESH ALBUM");
  155.  
  156.         // Add FRESH ALBUM thread if found
  157.         if (freshAlbumThread) {
  158.             relevantThreads.push(freshAlbumThread);
  159.             addedUrls.add(freshAlbumThread.url); // Track the URL to avoid duplicates
  160.             console.log(`Added FRESH ALBUM thread: "${freshAlbumThread.title}"`);
  161.         }
  162.  
  163.         // Find ALBUM DISCUSSION thread
  164.         const albumDiscussionThread = findBestThread(albumDiscussionResults, "ALBUM DISCUSSION");
  165.  
  166.         // Add ALBUM DISCUSSION thread if found and not a duplicate
  167.         if (albumDiscussionThread && !addedUrls.has(albumDiscussionThread.url)) {
  168.             relevantThreads.push(albumDiscussionThread);
  169.             addedUrls.add(albumDiscussionThread.url);
  170.             console.log(`Added ALBUM DISCUSSION thread: "${albumDiscussionThread.title}"`);
  171.         } else if (albumDiscussionThread) {
  172.             console.log(`Skipping duplicate ALBUM DISCUSSION thread: "${albumDiscussionThread.title}"`);
  173.         }
  174.  
  175.         console.log(`Found ${relevantThreads.length} unique relevant threads`);
  176.         return relevantThreads;
  177.     }
  178.  
  179.     /**
  180.      * Fetches comments from a given Reddit thread URL using the .json endpoint.
  181.      * Note: This uses GM_xmlhttpRequest for cross-origin requests in Userscripts.
  182.      *
  183.      * @param {string} threadUrl The URL of the Reddit thread.
  184.      * @returns {Promise<Array<Object>|null>} A promise that resolves with an array of comment data or null on error.
  185.      */
  186.     function fetchRedditComments(threadUrl) {
  187.         console.log(`[fetchRedditComments] Attempting to fetch comments for: ${threadUrl}`);
  188.         return new Promise((resolve, reject) => {
  189.             // Append .json to the thread URL to get the JSON data
  190.             const jsonUrl = threadUrl.endsWith('.json') ? threadUrl : threadUrl + '.json';
  191.  
  192.             console.log(`[fetchRedditComments] Requesting URL: ${jsonUrl}`);
  193.  
  194.             // Use GM_xmlhttpRequest for cross-origin requests
  195.             GM_xmlhttpRequest({
  196.                 method: "GET",
  197.                 url: jsonUrl,
  198.                 onload: function(response) {
  199.                     console.log(`[fetchRedditComments] Received response for ${jsonUrl}. Status: ${response.status}`);
  200.                     try {
  201.                         if (response.status === 200) {
  202.                             console.log(`[fetchRedditComments] Response Text for ${jsonUrl}: ${response.responseText.substring(0, 500)}...`); // Log beginning of response
  203.                             const data = JSON.parse(response.responseText);
  204.                             console.log("[fetchRedditComments] Successfully parsed JSON response.");
  205.                             // The JSON response for a thread includes two arrays: [submission, comments]
  206.                             // We need the comments array (index 1)
  207.                             if (data && data.length === 2 && data[1] && data[1].data && data[1].data.children) {
  208.                                 console.log(`[fetchRedditComments] Found comment data. Number of top-level items: ${data[1].data.children.length}`);
  209.                                 // Process the raw comment data to extract relevant info and handle replies
  210.                                 const comments = processComments(data[1].data.children);
  211.                                 console.log(`[fetchRedditComments] Processed comments. Total processed: ${comments.length}`);
  212.                                 resolve(comments);
  213.                             } else {
  214.                                 console.error("[fetchRedditComments] Unexpected Reddit JSON structure:", data);
  215.                                 resolve(null); // Resolve with null for unexpected structure
  216.                             }
  217.                         } else {
  218.                             console.error("[fetchRedditComments] Error fetching Reddit comments:", response.status, response.statusText);
  219.                             resolve(null); // Resolve with null on HTTP error
  220.                         }
  221.                     } catch (e) {
  222.                         console.error("[fetchRedditComments] Error parsing Reddit comments JSON:", e);
  223.                         resolve(null); // Resolve with null on parsing error
  224.                     }
  225.                 },
  226.                 onerror: function(error) {
  227.                     console.error("[fetchRedditComments] GM_xmlhttpRequest error fetching Reddit comments:", error);
  228.                     resolve(null); // Resolve with null on request error
  229.                 }
  230.             });
  231.         });
  232.     }
  233.  
  234.     /**
  235.      * Recursively processes raw Reddit comment data to extract relevant info and handle replies.
  236.      * Filters out 'more' comments placeholders.
  237.      *
  238.      * @param {Array<Object>} rawComments The raw comment children array from Reddit API.
  239.      * @returns {Array<Object>} An array of processed comment objects.
  240.      */
  241.     function processComments(rawComments) {
  242.         const processed = [];
  243.         if (!rawComments || !Array.isArray(rawComments)) {
  244.             return processed;
  245.         }
  246.  
  247.         for (const item of rawComments) {
  248.             // Skip 'more' comments placeholders
  249.             if (item.kind === 'more') {
  250.                 continue;
  251.             }
  252.  
  253.             // Ensure it's a comment and has the necessary data
  254.             if (item.kind === 't1' && item.data) {
  255.                 const commentData = item.data;
  256.                 const processedComment = {
  257.                     author: commentData.author,
  258.                     text: commentData.body,
  259.                     score: commentData.score,
  260.                     created_utc: commentData.created_utc,
  261.                     replies: [] // Initialize replies array
  262.                 };
  263.  
  264.                 // Recursively process replies if they exist
  265.                 if (commentData.replies && commentData.replies.data && commentData.replies.data.children) {
  266.                     processedComment.replies = processComments(commentData.replies.data.children);
  267.                 }
  268.  
  269.                 processed.push(processedComment);
  270.             }
  271.         }
  272.         return processed;
  273.     }
  274.  
  275.     // --- HTML Structures and Injection ---
  276.  
  277.     const REDDIT_COMMENTS_SECTION_HTML = `
  278.         <div class="reddit-comments-section">
  279.             <h3>Reddit Comments from r/indieheads</h3>
  280.             <div class="reddit-comments-tabs">
  281.                 <!-- Tab buttons will be added here -->
  282.             </div>
  283.             <div class="reddit-comments-content">
  284.                 <!-- Comment content areas will be added here -->
  285.                 <!-- Each area will have a data-thread-id or similar to link to the tab -->
  286.             </div>
  287.         </div>
  288.     `;
  289.  
  290.     /**
  291.      * Injects HTML content after the last paragraph in the article.
  292.      * @param {string|HTMLElement} content The HTML string or HTMLElement to inject.
  293.      */
  294.     function injectAfterLastParagraph(content) {
  295.         // Find the article element
  296.         const article = document.querySelector('article');
  297.         if (!article) {
  298.             console.error('Article element not found for injection');
  299.             return;
  300.         }
  301.  
  302.         // Find all paragraphs within the article, excluding those with class "disclaimer"
  303.         const paragraphs = Array.from(article.querySelectorAll('p')).filter(p => 
  304.             !p.classList.contains('disclaimer') && 
  305.             !p.closest('.disclaimer') // Also exclude paragraphs inside elements with class "disclaimer"
  306.         );
  307.  
  308.         if (paragraphs.length === 0) {
  309.             console.error('No valid paragraphs found in article for injection');
  310.             return;
  311.         }
  312.  
  313.         // Get the last paragraph
  314.         const lastParagraph = paragraphs[paragraphs.length - 1];
  315.  
  316.         // Insert content after the last paragraph
  317.         if (typeof content === 'string') {
  318.             lastParagraph.insertAdjacentHTML('afterend', content);
  319.         } else {
  320.             lastParagraph.insertAdjacentElement('afterend', content);
  321.         }
  322.     }
  323.  
  324.     // Function to render comments to HTML (basic structure)
  325.     function renderCommentsHtml(comments, level = 0) {
  326.         let html = `<ul class="reddit-comment-list level-${level}">`;
  327.         if (!comments || comments.length === 0) {
  328.             html += '<li>No comments found for this thread.</li>';
  329.         } else {
  330.             // Filter out deleted comments
  331.             const validComments = comments.filter(comment => 
  332.                 comment.author !== "[deleted]" && comment.text !== "[deleted]"
  333.             );
  334.  
  335.             if (validComments.length === 0) {
  336.                 html += '<li>No valid comments found for this thread.</li>';
  337.             } else {
  338.                 validComments.forEach(comment => {
  339.                     html += `<li class="reddit-comment">`;
  340.                     
  341.                     // Add collapse button for top-level comments
  342.                     if (level === 0) {
  343.                         html += `<div class="comment-meta">
  344.                             <b>${comment.author}</b> (${comment.score} points)
  345.                             <button class="comment-collapse-button">[−]</button>
  346.                         </div>`;
  347.                     } else {
  348.                         html += `<div class="comment-meta"><b>${comment.author}</b> (${comment.score} points)</div>`;
  349.                     }
  350.                     
  351.                     // Process comment text for special content
  352.                     let processedText = comment.text;
  353.                     
  354.                     // Process Giphy embeds first
  355.                     processedText = processedText.replace(/!\[gif\]\(giphy\|([a-zA-Z0-9]+)(?:\|downsized)?\)/g, (match, giphyId) => {
  356.                         return `
  357.                             <div class="giphy-embed-container">
  358.                                 <iframe src="https://giphy.com/embed/${giphyId}" 
  359.                                     width="480" height="270" frameBorder="0" 
  360.                                     class="giphy-embed" allowFullScreen></iframe>
  361.                             </div>
  362.                         `;
  363.                     });
  364.                     
  365.                     // Process Reddit image links
  366.                     processedText = processedText.replace(/(https:\/\/preview\.redd\.it\/[a-zA-Z0-9]+\.(jpeg|jpg|png|gif)\?[^\s)]+)/g, (match, imageUrl) => {
  367.                         return `
  368.                             <div class="reddit-image-container">
  369.                                 <img src="${imageUrl}" alt="Reddit Image" class="reddit-inline-image" />
  370.                             </div>
  371.                         `;
  372.                     });
  373.                     
  374.                     // Process Markdown image syntax for Reddit images
  375.                     processedText = processedText.replace(/!\[.*?\]\((https:\/\/preview\.redd\.it\/[a-zA-Z0-9]+\.(jpeg|jpg|png|gif)\?[^\s)]+)\)/g, (match, imageUrl) => {
  376.                         return `
  377.                             <div class="reddit-image-container">
  378.                                 <img src="${imageUrl}" alt="Reddit Image" class="reddit-inline-image" />
  379.                             </div>
  380.                         `;
  381.                     });
  382.                     
  383.                     // Process basic Markdown formatting
  384.                     
  385.                     // Bold text
  386.                     processedText = processedText.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
  387.                     
  388.                     // Italic text
  389.                     processedText = processedText.replace(/\*([^*]+)\*/g, '<em>$1</em>');
  390.                     
  391.                     // Block quotes - simple implementation
  392.                     processedText = processedText.replace(/^(>|>)\s*(.*?)$/gm, '<blockquote>$2</blockquote>');
  393.                     
  394.                     // Parse Markdown links
  395.                     processedText = processedText.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => {
  396.                         return `<a href="${url}" target="_blank" rel="noopener noreferrer">${linkText}</a>`;
  397.                     });
  398.                     
  399.                     // Parse plain URLs
  400.                     processedText = processedText.replace(/(?<!["\'])(https?:\/\/[^\s<>[\]()'"]+)(?![^<]*>)/g, (match, url) => {
  401.                         return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
  402.                     });
  403.                     
  404.                     // Handle line breaks - simple approach
  405.                     processedText = processedText.replace(/\n\n+/g, '</p><p>');
  406.                     processedText = processedText.replace(/\n/g, '<br>');
  407.                     
  408.                     // Wrap in paragraph tags if not already
  409.                     if (!processedText.startsWith('<p>') && 
  410.                         !processedText.startsWith('<div') && 
  411.                         !processedText.startsWith('<blockquote') &&
  412.                         !processedText.includes('<div class="giphy-embed-container">') &&
  413.                         !processedText.includes('<div class="reddit-image-container">')) {
  414.                         processedText = `<p>${processedText}</p>`;
  415.                     }
  416.                     
  417.                     html += `<div class="comment-body">${processedText}</div>`;
  418.                     if (comment.replies && comment.replies.length > 0) {
  419.                         html += renderCommentsHtml(comment.replies, level + 1);
  420.                     }
  421.                     html += `</li>`;
  422.                 });
  423.             }
  424.         }
  425.         html += `</ul>`;
  426.         return html;
  427.     }
  428.  
  429.     function setupCommentCollapse() {
  430.         document.querySelectorAll('.comment-collapse-button').forEach(button => {
  431.             button.addEventListener('click', function() {
  432.                 const commentLi = this.closest('.reddit-comment');
  433.                 commentLi.classList.toggle('collapsed');
  434.                 
  435.                 // Update button text
  436.                 if (commentLi.classList.contains('collapsed')) {
  437.                     this.textContent = '[+]';
  438.                 } else {
  439.                     this.textContent = '[−]';
  440.                 }
  441.             });
  442.         });
  443.     }
  444.  
  445.     // --- CSS Styles ---
  446.     function injectStyles() {
  447.         const styles = `
  448.             @media (min-width: 2400px) {
  449.                 #main-content div[class^="GridWrapper"] {
  450.                     max-width: 2000px;
  451.                 }
  452.             }
  453.             .reddit-comments-section {
  454.                 margin-top: 30px;
  455.                 padding: 20px;
  456.                 border-top: 1px solid #ddd;
  457.                 font-family: inherit;
  458.             }
  459.             .reddit-comments-tabs {
  460.                 display: flex;
  461.                 flex-wrap: wrap;
  462.                 margin-bottom: 15px;
  463.             }
  464.             .reddit-tab-button {
  465.                 padding: 8px 12px;
  466.                 margin-right: 5px;
  467.                 margin-bottom: 5px;
  468.                 background: #f0f0f0;
  469.                 border: 1px solid #ccc;
  470.                 border-radius: 4px;
  471.                 cursor: pointer;
  472.             }
  473.             .reddit-tab-button:not(.active):hover {
  474.                 background: #f8f8f8;
  475.             }
  476.             .reddit-tab-button:hover, .reddit-tab-button:active, .reddit-tab-button:focus {
  477.                 text-decoration: none;
  478.             }
  479.             .reddit-tab-button.active {
  480.                 background: #e0e0e0;
  481.                 border-color: #aaa;
  482.                 font-weight: bold;
  483.             }
  484.             .reddit-comment-list {
  485.                 list-style-type: none;
  486.                 padding-left: 0;
  487.             }
  488.             .reddit-comment-list.level-0 {
  489.                 padding-left: 0;
  490.                 margin-left: 0;
  491.             }
  492.             .reddit-comment-list.level-1 {
  493.                 padding-left: 20px;
  494.                 border-left: 2px solid #eee;
  495.             }
  496.             .reddit-comment-list.level-2,
  497.             .reddit-comment-list.level-3,
  498.             .reddit-comment-list.level-4,
  499.             .reddit-comment-list.level-5 {
  500.                 padding-left: 20px;
  501.                 border-left: 2px solid #f5f5f5;
  502.             }
  503.             .reddit-comment {
  504.                 margin-bottom: 15px;
  505.             }
  506.             .reddit-image-container {
  507.                 margin-top: 10px;
  508.             }
  509.             .comment-meta {
  510.                 font-size: .9em;
  511.                 margin-bottom: 5px;
  512.                 color: #666;
  513.             }
  514.             .comment-body {
  515.                 line-height: 1.5;
  516.             }
  517.             /* Markdown formatting styles */
  518.             .comment-body strong {
  519.                 font-weight: 700;
  520.             }
  521.             .comment-body em {
  522.                 font-style: italic;
  523.             }
  524.             .comment-body blockquote {
  525.                 border-left: 3px solid #c5c1ad;
  526.                 margin: 8px 0;
  527.                 padding: 0 8px 0 12px;
  528.                 color: #646464;
  529.                 background-color: #f8f9fa;
  530.             }
  531.             /* Paragraph styling */
  532.             .comment-body p {
  533.                 margin: .8em 0;
  534.             }
  535.  
  536.             .comment-body p:first-child {
  537.                 margin-top: 0;
  538.             }
  539.             .comment-body p:last-child {
  540.                 margin-bottom: 0;
  541.             }
  542.             .comment-body blockquote p {
  543.                 margin: .4em 0;
  544.             }
  545.             .reddit-comment.collapsed .comment-body,
  546.             .reddit-comment.collapsed .reddit-comment-list {
  547.                 display: none;
  548.             }
  549.             .reddit-comment.collapsed {
  550.                 opacity: 0.7;
  551.             }
  552.             .comment-collapse-button {
  553.                 background: none;
  554.                 border: none;
  555.                 color: #0079d3;
  556.                 cursor: pointer;
  557.                 font-size: 12px;
  558.                 margin-left: 5px;
  559.                 padding: 0;
  560.             }
  561.             .comment-collapse-button:hover {
  562.                 text-decoration: underline;
  563.             }
  564.         `;
  565.  
  566.         const styleElement = document.createElement('style');
  567.         styleElement.textContent = styles;
  568.         document.head.appendChild(styleElement);
  569.     }
  570.  
  571.  
  572.     // --- Main Execution Logic ---
  573.  
  574.     async function init() {
  575.         console.log("Pitchfork Reddit Comments Userscript started.");
  576.  
  577.         // Inject CSS styles
  578.         injectStyles();
  579.  
  580.         const artist = extractArtistName();
  581.         const album = extractAlbumName();
  582.  
  583.         if (!artist || !album) {
  584.             console.log("Could not extract artist or album name. Exiting.");
  585.             return;
  586.         }
  587.  
  588.         console.log(`Found Artist: ${artist}, Album: ${album}`);
  589.  
  590.         const queries = formatAlbumSearchQueries(artist, album);
  591.         console.log(`Search queries:`, queries);
  592.  
  593.         // Make separate search requests for each query type
  594.         const freshAlbumUrl = buildIndieHeadsSearchJsonUrl(queries.freshAlbumQuery);
  595.         const albumDiscussionUrl = buildIndieHeadsSearchJsonUrl(queries.albumDiscussionQuery);
  596.  
  597.         console.log(`Fresh Album Search URL: ${freshAlbumUrl}`);
  598.         console.log(`Album Discussion Search URL: ${albumDiscussionUrl}`);
  599.  
  600.         // Function to perform a search request
  601.         const performSearch = (url) => {
  602.             return new Promise((resolve, reject) => {
  603.                 GM_xmlhttpRequest({
  604.                     method: "GET",
  605.                     url: url,
  606.                     onload: function(response) {
  607.                         try {
  608.                             console.log(`[Search Request] Received response. Status: ${response.status}`);
  609.                             if (response.status === 200) {
  610.                                 const searchData = JSON.parse(response.responseText);
  611.                                 console.log("[Search Request] Successfully parsed JSON response.");
  612.                                 if (searchData && searchData.data && searchData.data.children) {
  613.                                     resolve(searchData.data.children);
  614.                                 } else {
  615.                                     console.error("[Search Request] Unexpected Reddit search JSON structure:", searchData);
  616.                                     resolve([]);
  617.                                 }
  618.                             } else {
  619.                                 console.error("[Search Request] Error fetching Reddit search results:", response.status, response.statusText);
  620.                                 resolve([]);
  621.                             }
  622.                         } catch (e) {
  623.                             console.error("[Search Request] Error parsing Reddit search JSON:", e);
  624.                             resolve([]);
  625.                         }
  626.                     },
  627.                     onerror: function(error) {
  628.                         console.error("[Search Request] GM_xmlhttpRequest error fetching Reddit search results:", error);
  629.                         resolve([]);
  630.                     }
  631.                 });
  632.             });
  633.         };
  634.  
  635.         try {
  636.             // Perform both searches in parallel
  637.             const [freshAlbumResults, albumDiscussionResults] = await Promise.all([
  638.                 performSearch(freshAlbumUrl),
  639.                 performSearch(albumDiscussionUrl)
  640.             ]);
  641.  
  642.             // Identify relevant threads from both result sets
  643.             const relevantThreads = identifyRelevantThreads(
  644.                 freshAlbumResults,
  645.                 albumDiscussionResults,
  646.                 typeof artist === 'string' ? artist : artist.join(' & '), 
  647.                 album
  648.             );
  649.  
  650.             if (relevantThreads.length === 0) {
  651.                 console.log("No relevant Reddit threads found.");
  652.                 const noThreadsMessage = document.createElement('p');
  653.                 noThreadsMessage.textContent = 'No relevant Reddit threads found for this review.';
  654.                 noThreadsMessage.style.fontStyle = 'italic';
  655.                 noThreadsMessage.style.marginTop = '20px'; // Add some spacing
  656.                 injectAfterLastParagraph(noThreadsMessage);
  657.                 return;
  658.             }
  659.  
  660.             console.log(`Found ${relevantThreads.length} relevant thread(s):`, relevantThreads);
  661.  
  662.             // Inject the main comments section container
  663.             injectAfterLastParagraph(REDDIT_COMMENTS_SECTION_HTML);
  664.  
  665.             const commentsSection = document.querySelector('.reddit-comments-section');
  666.             const tabsArea = commentsSection.querySelector('.reddit-comments-tabs');
  667.             const contentArea = commentsSection.querySelector('.reddit-comments-content');
  668.  
  669.             // Fetch comments and build tabs/content
  670.             for (let i = 0; i < relevantThreads.length; i++) {
  671.                 const thread = relevantThreads[i];
  672.                 console.log(`Fetching comments for thread: ${thread.title} (${thread.url})`);
  673.                 const comments = await fetchRedditComments(thread.url);
  674.  
  675.                 // Generate tab button
  676.                 const tabButton = document.createElement('button');
  677.                 tabButton.classList.add('reddit-tab-button');
  678.                 tabButton.textContent = thread.title + ' ';
  679.                 tabButton.setAttribute('data-thread-index', i);
  680.  
  681.                 // Add a direct link icon that opens the Reddit thread in a new tab
  682.                 const linkIcon = document.createElement('a');
  683.                 linkIcon.href = thread.url;
  684.                 linkIcon.target = '_blank';
  685.                 linkIcon.rel = 'noopener noreferrer'; // Security best practice for target="_blank"
  686.                 linkIcon.innerHTML = '🔗';
  687.                 linkIcon.title = 'Open Reddit thread in new tab';
  688.                 linkIcon.style.fontSize = '0.8em';
  689.                 linkIcon.style.opacity = '0.7';
  690.                 linkIcon.style.textDecoration = 'none'; // Remove underline
  691.                 linkIcon.style.marginLeft = '5px';
  692.  
  693.                 tabButton.appendChild(linkIcon);
  694.                 tabsArea.appendChild(tabButton);
  695.  
  696.                 // Generate comment content area
  697.                 const threadContent = document.createElement('div');
  698.                 threadContent.classList.add('reddit-tab-content');
  699.                 threadContent.setAttribute('data-thread-index', i);
  700.                 threadContent.style.display = 'none'; // Hide by default
  701.  
  702.                 if (comments) {
  703.                     threadContent.innerHTML = renderCommentsHtml(comments);
  704.                     // Set up collapse functionality for this tab's comments
  705.                     setupCommentCollapse();
  706.                 } else {
  707.                     threadContent.innerHTML = '<p>Could not load comments for this thread.</p>';
  708.                 }
  709.                 contentArea.appendChild(threadContent);
  710.  
  711.                 // Activate the first tab and content by default
  712.                 if (i === 0) {
  713.                     tabButton.classList.add('active');
  714.                     threadContent.style.display = 'block';
  715.                 }
  716.             }
  717.  
  718.             // Add event listeners for tab switching
  719.             const tabButtons = tabsArea.querySelectorAll('.reddit-tab-button');
  720.             const tabContents = contentArea.querySelectorAll('.reddit-tab-content');
  721.  
  722.             tabButtons.forEach(button => {
  723.                 button.addEventListener('click', () => {
  724.                     const threadIndex = button.getAttribute('data-thread-index');
  725.  
  726.                     // Deactivate all tabs and hide all content
  727.                     tabButtons.forEach(btn => btn.classList.remove('active'));
  728.                     tabContents.forEach(content => content.style.display = 'none');
  729.  
  730.                     // Activate the clicked tab and show corresponding content
  731.                     button.classList.add('active');
  732.                     const activeContent = document.querySelector(`.reddit-tab-content[data-thread-index="${threadIndex}"]`);
  733.                     activeContent.style.display = 'block';
  734.  
  735.                     // Re-initialize collapse functionality for the newly displayed tab
  736.                     setupCommentCollapse();
  737.                 });
  738.             });
  739.  
  740.         } catch (error) {
  741.             console.error("Error during search process:", error);
  742.         }
  743.     }
  744.  
  745.     // Run the initialization function
  746.     init();
  747.  
  748. })();