☰

SaveAsZip for Patreon

一键下载帖子内所有图片，并保存为ZIP文件。

目前为 2023-10-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         SaveAsZip for Patreon
  3. // @name:ja      SaveAsZip for Patreon
  4. // @name::zh-cn  SaveAsZip for Patreon
  5. // @name::zh-tw  SaveAsZip for Patreon
  6. // @description  Download post images and save as a ZIP file.
  7. // @description:ja  投稿の画像をZIPファイルとして保存する。
  8. // @description:zh-cn  一键下载帖子内所有图片，并保存为ZIP文件。
  9. // @description:zh-tw  一鍵下載帖子内所有圖片，並保存為ZIP文件。
  10. // @version      1.11
  11. // @namespace    none
  12. // @match        https://*.patreon.com/*
  13. // @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js
  14. // @grant        none
  15. // @license      MIT
  16. // ==/UserScript==
  17. /* jshint esversion: 8 */
  18.  
  19. let preset_zip_name = '{user_name}_{user_id}_{post_id}_{created}_{post_title}_images.zip';
  20.  
  21. const JSZip = window.JSZip;
  22. const is_post_page = location.pathname.indexOf('/posts/') == 0;
  23. const is_user_page = document.body.id == 'creator_membership' || location.pathname.split('/').pop() == 'posts';
  24. let observer;
  25.  
  26. addStyle();
  27. addButton();
  28.  
  29. function addButton() {
  30.   if (is_post_page) findPostsIn(document);
  31.   else if (is_user_page) {
  32.     observer = new MutationObserver(() => findPostsList());
  33.     observer.observe(document.body, {childList: true, subtree: true});
  34.   }
  35. }
  36.  
  37. function findPostsList() {
  38.   let posts_list = document.querySelector('div[data-tag="all-posts-layout"], div[data-tag="post-stream-container"]');
  39.   if (posts_list) {
  40.     observer.disconnect();
  41.     findPostsIn(posts_list);
  42.     if (is_user_page) {
  43.       //on load more posts
  44.       let observer_list = new MutationObserver(ms => ms.forEach(m => {
  45.         if (m.addedNodes.length) findPostsIn(m.addedNodes[0]);
  46.       }));
  47.       observer_list.observe(posts_list, {childList: true});
  48.       //on change post list
  49.       let is_stream = posts_list.dataset.tag == 'post-stream-container';
  50.       new MutationObserver(ms => ms.forEach(m => {
  51.         if (m.addedNodes.length && (is_stream ? m.addedNodes[0].tagName == 'UL' : m.addedNodes[0].dataset.tag == 'all-posts-layout')) {
  52.           findPostsIn(m.addedNodes[0]);
  53.           observer_list.disconnect();
  54.           observer_list.observe(m.addedNodes[0], {childList: true});
  55.         }
  56.       })).observe(is_stream ? posts_list.querySelector(':scope>div:last-child') : posts_list.parentNode, {childList: true});
  57.     }
  58.   }
  59. }
  60.  
  61. function findPostsIn(doc) {
  62.   let posts = doc.querySelectorAll('div[data-tag="post-card"], div[data-tag="post"]');
  63.   posts.forEach(post => {
  64.     let has_images = post.querySelector('div[data-tag="chip-container"]');
  65.     let is_visible = !post.querySelector('a[href^="/checkout/"]');
  66.     if (has_images && is_visible) addButtonTo(post);
  67.   });
  68. }
  69.  
  70. function addButtonTo(post) {
  71.   let btn = document.createElement('div');
  72.   btn.classList.add('saveaszip');
  73.   btn.innerHTML = '<label><span class="btn-icon">📥</span><span class="btn-text">ZIP</span></label>';
  74.   btn.onclick = () => SaveAsZip(btn, post);
  75.   post.querySelector('div[data-tag="chip-container"]').parentNode.appendChild(btn);
  76. }
  77.  
  78. async function SaveAsZip(btn, post) {
  79.   if (btn.classList.contains('down')) return;
  80.   else btn.classList.add('down');
  81.   let btn_text = btn.querySelector('.btn-text');
  82.   const status = text => (btn_text.innerText = text);
  83.   //get post json
  84.   let post_info = window.patreon && window.patreon.bootstrap.post; //post page
  85.   if (!post_info) {
  86.     let post_href = post.querySelector('a[href^="/posts/"]').href;
  87.     let post_page = await (await fetch(post_href)).text();
  88.     post_page = post_page.split('Object.assign(window.patreon.bootstrap, ')[1].split(');\n      Object.assign')[0];
  89.     post_info = JSON.parse(post_page).post;
  90.   }
  91.   //extract post info
  92.   let invalid_chars = {'\\': '＼', '/': '／', '|': '｜', '<': '＜', '>': '＞', ':': '：', '*': '＊', '?': '？', '"': '＂'};
  93.   let info = {};
  94.   info.post_id = post_info.data.id;
  95.   info.post_title = post_info.data.attributes.title.replace(/[\/|<>:*?"\u200d]/g, v => invalid_chars[v] || '');
  96.   info.user_id = post_info.included.find(i => i.type == 'user').id;
  97.   info.user_name = post_info.included.find(i => i.type == 'campaign').attributes.name.replace(/[\/|<>:*?"\u200d]/g, v => invalid_chars[v] || '');
  98.   let created_format = preset_zip_name.match(/{created:[^{}]+}/) ? preset_zip_name.match(/{created:([^{}]+)}/)[1] : 'YYYY-MM-DD';
  99.   info.created = formatDate(post_info.data.attributes.created_at, created_format);
  100.   //create zip and set filename
  101.   let zip = new JSZip();
  102.   let zip_name = preset_zip_name.replace(/{([^{}:]+)(:[^{}]+)?}/g, (match, name) => info[name]);
  103.   //zip.file('post_content.txt', post.data.attributes.content);
  104.   //find images
  105.   let images = post_info.included.filter(i => i.type == 'media');
  106.   let image_order = post_info.data.attributes.post_metadata.image_order;
  107.   for (let i = 0; i < images.length; i++) {
  108.     status(`${i + 1} / ${images.length}`);
  109.     //download image and add to zip
  110.     let image = images[i];
  111.     let order = ('000' + (image_order ? image_order.indexOf(image.id) + 1 : i + 1)).slice(-3);
  112.     let image_blob = await (await fetch(image.attributes.download_url)).blob();
  113.     zip.file(`${order}_${image.id}_${image.attributes.file_name}`, image_blob);
  114.   }
  115.   //save
  116.   status('Save');
  117.   let zip_blob = await zip.generateAsync({type: 'blob'});
  118.   let zip_url = URL.createObjectURL(zip_blob);
  119.   //GM_download has some bug in tampermonkey, browser will freeze few second each download
  120.   //GM_download({url: zip_url, name: zip_name, onload: () => URL.revokeObjectURL(zip_url)});
  121.   let link = document.createElement('a');
  122.   link.href = zip_url;
  123.   link.download = zip_name;
  124.   link.dispatchEvent(new MouseEvent('click'));
  125.   setTimeout(() => URL.revokeObjectURL(zip_url), 100);
  126.   //done
  127.   btn.classList.remove('down');
  128.   btn.classList.add('done');
  129.   status('Done');
  130. }
  131.  
  132. function formatDate(i, o) {
  133.   let d = new Date(i);
  134.   let v = {
  135.     YYYY: d.getUTCFullYear().toString(),
  136.     MM: d.getUTCMonth() + 1,
  137.     DD: d.getUTCDate(),
  138.     hh: d.getUTCHours(),
  139.     mm: d.getUTCMinutes()
  140.   };
  141.   return o.replace(/(YYYY|MM|DD|hh|mm)/g, n => ('0' + v[n]).substr(-n.length));
  142. }
  143.  
  144. function addStyle() {
  145.   let css = `
  146. .saveaszip {display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: top;}
  147. .saveaszip label {display: inline-flex; gap: 6px; align-items: center;}
  148. .saveaszip label {background: #0008; border: 1px solid #0000; border-radius: 4px; height: 26px; padding: 0px 6px;}
  149. .saveaszip label span {color: white; font-size: 13px; line-height: 1.3;}
  150. .saveaszip label span.btn-icon {color: #0000; text-shadow: white 0 0;}
  151. .saveaszip:hover label {background: #000a; border-color: #fff3;}
  152. .saveaszip.done label:nth-child(1) {background: #060a; border-color: #fff3;}
  153. .saveaszip.down label:nth-child(1) {background: #000a; border-color: #fff3;}
  154. /* progress bar animation */
  155. .saveaszip.down label:nth-child(1) {background-image: linear-gradient(-45deg, #fff2 0%, #fff2 25%, #0000 25%, #0000 50%, #fff2 50%, #fff2 75%, #0000 75%, #0000 100%); background-size: 32px 32px; animation: progress 2s linear infinite;}
  156. @keyframes progress {0% {background-position:0 0} 100% {background-position:32px 32px}}
  157. `;
  158.   document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`);
  159. }