☰

Patreon IFrame Embed Into Clipboard

Adds a button to turn Patreon IFrame embedded posts into custom text on your clipboard

  1. // ==UserScript==
  2. // @name        Patreon IFrame Embed Into Clipboard
  3. // @license     MIT
  4. // @namespace   rtonne
  5. // @match       https://www.patreon.com/*
  6. // @icon        https://www.google.com/s2/favicons?sz=64&domain=patreon.com
  7. // @version     1.5
  8. // @author      Rtonne
  9. // @description Adds a button to turn Patreon IFrame embedded posts into custom text on your clipboard
  10. // @run-at      document-end
  11. // @grant       GM.setClipboard
  12. // ==/UserScript==
  13.  
  14. function getClipboardContent(post_title_text, post_url, post_iframe_url) {
  15.   // The content of this function is for my use case, and was put into this
  16.   // function so you could change it for your use case easier, so go ahead!
  17.   const post_iframe_search_url = post_iframe_url.substring(
  18.     post_iframe_url.indexOf("?") + 1,
  19.   );
  20.   const post_iframe_search_params = new URLSearchParams(post_iframe_search_url);
  21.   const post_streamable_url = post_iframe_search_params.get("src");
  22.  
  23.   return `
  24. ### ${post_title_text} [](${post_url})
  25.  
  26. - [ ] 👁
  27.  
  28. <iframe src="${post_streamable_url}" style="width: 100%; max-height: 70vh; aspect-ratio: 16 / 9;" allowfullscreen></iframe>
  29. `;
  30. }
  31.  
  32. const clipboard_svg = /*svg*/ `
  33. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" >
  34.     <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
  35.     <path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/>
  36. </svg>`;
  37.  
  38. const url_regex = /^https:\/\/www.patreon.com\/[^\/]+?\/posts.*$/;
  39. const observer = new MutationObserver(async () => {
  40.   if (!url_regex.test(window.location.href)) {
  41.     return;
  42.   }
  43.  
  44.   const elements = await waitForElements(
  45.     document,
  46.     "li div[data-tag='post-card']",
  47.   );
  48.  
  49.   for (const element of elements) {
  50.     if (element.querySelector(".rtonne-patreon-streamable-button")) {
  51.       continue;
  52.     }
  53.     const post_video_figure = element.querySelector(
  54.       "figure[title='video thumbnail']",
  55.     );
  56.     if (!post_video_figure) {
  57.       continue;
  58.     }
  59.     const more_actions_button_container = element.querySelector(
  60.       "div:has(> button[data-tag='more-actions-button'])",
  61.     );
  62.     const more_actions_button = more_actions_button_container.querySelector(
  63.       "button[data-tag='more-actions-button']",
  64.     );
  65.  
  66.     const clipboard_button = document.createElement("button");
  67.     clipboard_button.className = more_actions_button.className;
  68.     clipboard_button.classList.add("rtonne-patreon-streamable-button");
  69.     more_actions_button_container.before(clipboard_button);
  70.     const clipboard_button_svg_container = document.createElement("div");
  71.     clipboard_button_svg_container.className =
  72.       more_actions_button.children[0].className;
  73.     clipboard_button_svg_container.innerHTML = clipboard_svg;
  74.     clipboard_button.append(clipboard_button_svg_container);
  75.  
  76.     clipboard_button.onclick = async () => {
  77.       post_video_figure
  78.         .querySelector("div[data-tag='media-container']")
  79.         .click();
  80.       const [post_iframe] = await waitForElements(element, "iframe");
  81.       const post_iframe_url = post_iframe.src;
  82.  
  83.       const post_title = element.querySelector(
  84.         "span[data-tag='post-title'] > a",
  85.       );
  86.       const post_title_text = post_title.innerText.trim();
  87.       const post_url = post_title.href;
  88.  
  89.       GM.setClipboard(
  90.         getClipboardContent(post_title_text, post_url, post_iframe_url),
  91.       );
  92.     };
  93.   }
  94. });
  95. observer.observe(document.body, {
  96.   childList: true,
  97.   subtree: true,
  98. });
  99.  
  100. /**
  101.  * Uses a MutationObserver to wait until the element we want exists.
  102.  * This function is required because elements take a while to appear sometimes.
  103.  * https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
  104.  * @param {HTMLElement} node The element we want to search in.
  105.  * @param {string} selector A string for node.querySelector describing the elements we want.
  106.  * @returns {Promise<HTMLElement[]>} The list of elements found.
  107.  */
  108. function waitForElements(node, selector) {
  109.   return new Promise((resolve) => {
  110.     if (node.querySelector(selector)) {
  111.       return resolve(node.querySelectorAll(selector));
  112.     }
  113.  
  114.     const observer = new MutationObserver(() => {
  115.       if (node.querySelector(selector)) {
  116.         observer.disconnect();
  117.         resolve(node.querySelectorAll(selector));
  118.       }
  119.     });
  120.  
  121.     observer.observe(document.body, {
  122.       childList: true,
  123.       subtree: true,
  124.     });
  125.   });
  126. }