☰

Extract images for Twitter

Adds a button that opens all attached images as original size to every tweet.

  1. // ==UserScript==
  2. // @name        Extract images for Twitter
  3. // @name:ja     Extract images for Twitter
  4. // @namespace   https://greasyfork.org/ja/users/24052-granony
  5. // @description Adds a button that opens all attached images as original size to every tweet.
  6. // @description:ja 各ツィートに，添付されている画像をオリジナルのサイズで開くためのボタンを追加します．
  7. // @include     https://twitter.com/*
  8. // @author      granony
  9. // @version     2.0.1
  10. // @grant       none
  11. // @license     MIT License
  12. // ==/UserScript==
  13. (function () {  
  14.   var processedLists = new WeakMap();
  15.   
  16.   // ボタンの作成
  17.   var createButton = function (list) {
  18.     var images = list.parentNode.parentNode.getElementsByClassName('AdaptiveMedia-photoContainer');
  19.     var button = document.createElement('div');
  20.     button.setAttribute('class', 'ProfileTweet-action js-toggleState ProfileTweet-action--ExtractImages');
  21.     button.innerHTML = '<button class="ProfileTweet-actionButton js-actionButton" type="button">'+
  22.     '<div class="IconContainer js-tooltip" title="Extract Images">'+
  23.     '<span class="Icon Icon--photo"></span>'+
  24.     '</div>'+
  25.     '</button>';
  26.     button.addEventListener('click', function () {
  27.       for (var j = 0; j < images.length; j++) {
  28.         var url = images[j].getAttribute('data-image-url') + ':orig';
  29.         window.open(url);
  30.       }
  31.     });
  32.     button.addEventListener('mouseenter',function(){
  33.       if(images.length<1){
  34.         return;
  35.       }
  36.       var icon = button.getElementsByClassName("Icon")[0];
  37.       icon.style.color = "rgb(47,194,239)";
  38.     })
  39.     button.addEventListener('mouseleave',function(){
  40.       var icon = button.getElementsByClassName("Icon")[0];
  41.       icon.style.color = "rgb(170,184,194)";
  42.     })
  43.     return button;
  44.   };
  45.   
  46.   // 新規に出現したtweetsに対してボタンを追加
  47.   var addButtons = function () {
  48.     var lists = document.getElementsByClassName('ProfileTweet-actionList');
  49.     for (var i = 0; i < lists.length; i++) {
  50.       var list = lists[i];
  51.       if (processedLists.has(list)) {
  52.         continue;
  53.       } else {
  54.         // なぜか画面遷移前のボタンが残ることがあるので，暫定的に対処
  55.         var oldButton = list.getElementsByClassName("ProfileTweet-action--ExtractImages")[0];
  56.         if(oldButton){
  57.           oldButton.parentNode.removeChild(oldButton);
  58.         }
  59.         // 実際に登録
  60.         processedLists.set(list, 1);
  61.         var button = createButton(list);
  62.         list.appendChild(button);
  63.       }
  64.     }
  65.   };
  66.   
  67.   // ツィートの表示件数が増えた場合
  68.   (function () {
  69.     var DOMObserverTimer = false;
  70.     var DOMObserverConfig = {
  71.       attributes: true,
  72.       childList: true,
  73.       subtree: true
  74.     };
  75.     var DOMObserver = new MutationObserver(function () {
  76.       if (DOMObserverTimer !== 'false') {
  77.         clearTimeout(DOMObserverTimer);
  78.       }
  79.       DOMObserverTimer = setTimeout(function () {
  80.         DOMObserver.disconnect();
  81.         addButtons();
  82.         DOMObserver.observe(document.body, DOMObserverConfig);
  83.       }, 100);
  84.     });
  85.     DOMObserver.observe(document.body, DOMObserverConfig);
  86.   }) ();
  87.   
  88.   // 初回実行
  89.   addButtons();
  90. }) ();