关于油猴脚本

范例：使用油猴脚本及 Eagle API，开发 Pinterest 批量导入扩展

跨域访问 CORS 问题

如果你想要透过「油猴」等脚本扩展在网页中使用 Eagle API，请使用 GM_xmlhttpRequest 方法进行呼叫，即可避免跨域安全限制的问题。

  1. GM_xmlhttpRequest({
  2.     url: EAGLE_IMPORT_API_URL,
  3.     method: "POST",
  4.     data: JSON.stringify({ items: images, folderId: pageInfo.folderId }),
  5.     onload: function(response) {}
  6. });

完整代码：

  1. // ==UserScript==
  2. // @name                Save Pinterest images to Eagle
  3. // @name:zh-CN          批量导入 Pinterest 图片到 Eagle
  4. // @name:zh-TW          批次導入 Pinterest 圖片到 Eagle
  5. // @name:ja-JP          Pinterestの画像を Eagle に保存
  7. // @description         Launch a script on Pinterest that automatically scrolls the page and converts all images on the page into large images (with links, names) to be added to the Eagle App.
  8. // @description:zh-CN   请确保你的网路环境可以正常访问 Pinterest，如果设备网路无法访问，此脚本将无法正常运作。在 Pinterest 画版页面启动脚本，此脚本会自动滚动页面，将页面中所有图片转换成大图（包含链接、名称），添加至 Eagle App。
  9. // @description:zh-TW   在 Pinterest 畫版頁面啓動腳本，此腳本會自動滾動頁面，將頁面中所有圖片轉換成大圖（包含鏈接、名稱），添加至 Eagle App。
  10. // @description:ja-JP   Pinterestのボードページ上でスクリプトを起動すると、ページが自動的にスクロールし、ページ上のすべての画像を大きな画像（リンク、名前付き）に変換してEagleアプリに追加することができます。
  12. // @author              Augus
  13. // @namespace           https://eagle.cool/
  14. // @homepageURL         https://eagle.cool/
  15. // @supportURL          https://docs-cn.eagle.cool/
  16. // @icon                https://cn.eagle.cool/favicon.png
  17. // @license             MIT License
  19. // @match               https://www.pinterest.com/*
  20. // @grant               GM_xmlhttpRequest
  21. // @run-at              context-menu
  23. // @date                06/16/2020
  24. // @modified            06/16/2020
  25. // @version             0.0.3
  27. // ==/UserScript==
  30. (function() {
  32.     if (location.href.indexOf("pinterest.com") === -1) {
  33.         alert("This script only works on pinterest.com.");
  34.         return;
  35.     }
  37.     // Eagle API 服务器位置
  38.     const EAGLE_SERVER_URL = "http://localhost:41595";
  39.     const EAGLE_IMPORT_API_URL = `${EAGLE_SERVER_URL}/api/item/addFromURLs`;
  40.     const EAGLE_CREATE_FOLDER_API_URL = `${EAGLE_SERVER_URL}/api/folder/create`;
  42.     // Pinterest 当前图片、链接命名规则
  43.     const SELECTOR_IMAGE = "[data-grid-item] a img[srcset]";
  44.     const SELECTOR_LINK = "[data-grid-item] a";
  45.     const SELECTOR_SPINNER = `[aria-label="Board Pins grid"]`;
  47.     var startTime = Date.now();     // 开始滚动时间
  48.     var scrollInterval;             // 无限滚动，直到底部
  49.     var lastScrollPos;              // 上一次滚轴位置
  50.     var retryCount = 0;             // 目前重试次数
  51.     var scrollDelay = 500;          // 滚动页面延迟
  52.     var retryThreshold = 4;         // 无法滚动页面重试次数，当超过次数，表示到底部了
  53.     var pageInfo = {
  54.         imageCount: 0,
  55.         imageSet: {},
  56.         folderId: ""
  57.     };
  59.     // 创建文件夹
  60.     var createFolder = function(folderName, callback) {
  61.         GM_xmlhttpRequest({
  62.             url: EAGLE_CREATE_FOLDER_API_URL,
  63.             method: "POST",
  64.             data: JSON.stringify({ folderName: folderName }),
  65.             onload: function(response) {
  66.                 try {
  67.                     var result = JSON.parse(response.response);
  68.                     if (result.status === "success" && result.data && result.data.id) {
  69.                         callback(undefined, result.data);
  70.                     } else {
  71.                         callback(true);
  72.                     }
  73.                 } catch (err) {
  74.                     callback(true);
  75.                 }
  76.             }
  77.         });
  78.     };
  80.     // 滚动至页面顶端
  81.     var scarollToTop = function() {
  82.         window.scrollTo(0, 0);
  83.         lastScrollPos = window.scrollY;
  84.     };
  86.     // 滚动至页面底端
  87.     var scarollToBottom = function() {
  88.         window.scrollTo(0, document.body.scrollHeight);
  89.         // window.scrollTo(0, window.innerHeight);
  90.         lastScrollPos = window.scrollY;
  91.     };
  93.     // 取得当前画面所有图片链接
  94.     var getImgs = function() {
  95.         var imgs = [];
  96.         var imgElements = Array.from(document.querySelectorAll(SELECTOR_IMAGE));
  98.         // 避免重复添加
  99.         imgElements = imgElements.filter(function(elem) {
  100.             var src = elem.src;
  101.             if (!pageInfo.imageSet[src]) {
  102.                 pageInfo.imageSet[src] = true;
  103.                 return true;
  104.             }
  105.             return false;
  106.         });
  108.         var getLink = function(img) {
  109.             var links = Array.from(document.querySelectorAll(SELECTOR_LINK));
  110.             for (var i = 0; i < links.length; i++) {
  111.                 if (links[i].contains(img)) {
  112.                     return absolutePath(links[i].href);
  113.                 }
  114.             }
  115.             return "";
  116.         };
  118.         imgs = imgElements.map(function(elem, index) {
  119.             pageInfo.imageCount++;
  120.             return {
  121.                 name: elem.alt || "",
  122.                 url: getHighestResImg(elem) || elem.src, // 取得最大分辨率
  123.                 website: getLink(elem), // 取得图片链接
  124.                 modificationTime: startTime - pageInfo.imageCount // 强制设置时间，确保在 Eagle 顺序与 Pinterest 相同
  125.             }
  126.         });
  128.         return imgs;
  129.     };
  131.     // 滚动页面并取得图片信息，发送至 Eagle App
  132.     var fetchImages = function() {
  133.         var currentScrollPos = window.scrollY;
  134.         scarollToBottom();
  135.         // 到底了
  136.         if (lastScrollPos === currentScrollPos) {
  137.             // 画面如果出现 Spinner 表示后面还有内容尚未载入完成
  138.             if (!document.querySelector(SELECTOR_SPINNER)) {
  139.                 retryCount++;
  140.                 if (retryCount >= retryThreshold) {
  141.                     clearInterval(scrollInterval);
  142.                     alert(`Scan completed, a total of ${pageInfo.imageCount} images have been added to Eagle App.`);
  143.                 }
  144.             }
  145.         }
  146.         // 还有内容
  147.         else {
  148.             retryCount = 0;
  149.             var images = getImgs();
  150.             addImagesToEagle(images);
  151.         }
  152.     }
  154.     // 将图片添加至 Eagle
  155.     var addImagesToEagle = function(images) {
  156.         GM_xmlhttpRequest({
  157.             url: EAGLE_IMPORT_API_URL,
  158.             method: "POST",
  159.             data: JSON.stringify({ items: images, folderId: pageInfo.folderId }),
  160.             onload: function(response) {}
  161.         });
  162.     }
  164.     function absolutePath(href) {
  165.         if (href && href.indexOf(" ") > -1) {
  166.             href = href.trim().split(" ")[0];
  167.         }
  168.         var link = document.createElement("a");
  169.         link.href = href;
  170.         return link.href;
  171.     }
  173.     function getHighestResImg(element) {
  174.         if (element.getAttribute('srcset')) {
  175.             let highResImgUrl = '';
  176.             let maxRes = 0;
  177.             let imgWidth, urlWidthArr;
  178.             element.getAttribute('srcset').split(',').forEach((item) => {
  179.                 urlWidthArr = item.trim().split(' ');
  180.                 imgWidth = parseInt(urlWidthArr[1]);
  181.                 if (imgWidth > maxRes) {
  182.                     maxRes = imgWidth;
  183.                     highResImgUrl = urlWidthArr[0];
  184.                 }
  186.             });
  187.             return highResImgUrl;
  188.         } else {
  189.             return element.getAttribute('src');
  190.         }
  191.     }
  193.     // 脚本开始
  194.     scarollToTop();
  196.     // 创建本次保存使用文件夹
  197.     var folderName = document.querySelector("h1") && document.querySelector("h1").innerText || "Pinterest";
  198.     createFolder(folderName, function(err, folder) {
  199.         if (folder) {
  200.             // 持续滚动列表，直到列表没有更多内容
  201.             pageInfo.folderId = folder.id;
  202.             scrollInterval = setInterval(fetchImages, 1000);
  203.         } else {
  204.             alert("An error has occurred or the Eagle app is not open.");
  205.         }
  206.     });
  208. })();