☰

Twitter Home - clickable links to images

Linkifies all images in the Twitter Home stream. These links point to the :orig version while the stream content is modified to use the :small variant to increase performance.

当前为 2018-12-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Twitter Home - clickable links to images 
  3. // @namespace    twitter_home_linkify
  4. // @version      1.0.0
  5. // @license      GNU AGPLv3
  6. // @description  Linkifies all images in the Twitter Home stream. These links point to the :orig version while the stream content is modified to use the :small variant to increase performance.
  7. // @author       marp
  8. // hhhhomepageURL  
  9. // @include      https://twitter.com/
  10. // @include      https://twitter.com/*
  11. // @include      https://pbs.twimg.com/media/*
  12. // @exclude      https://twitter.com/settings
  13. // @exclude      https://twitter.com/settings/*
  14. // @run-at document-end
  15. // ==/UserScript==
  16.  
  17. function createImageLinks(myDoc, myContext) {
  18.  
  19. //console.info("createImageLinks: ", myContext);
  20.   
  21.   if (myDoc===null) myDoc= myContext;
  22.   if (myDoc===null) return;
  23.   if (myContext===null) myContext= myDoc;
  24.   
  25.   var matches;
  26.   var tmpstr;
  27.  
  28.   matches=myDoc.evaluate("//div[contains(@class,'AdaptiveMedia-photoContainer')]/img", 
  29.                          myContext, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  30.   for(var i=0, el; (i<matches.snapshotLength); i++) {
  31.     el=matches.snapshotItem(i);
  32.     if (el) {
  33.       try {
  34. //        console.info("matched-element: ", el);
  35.         tmpstr=getCleanImageURL(el.getAttribute("src"), false);
  36. //        console.info("cleanurl: ", tmpstr);
  37.         // only need ":small" variant for tream/thumbnail display (save bandwidth and increase performance)
  38.         el.setAttribute("src", tmpstr+":small");
  39.         // create dorect link to ":orig" image - best way to access by opening in new tab via "middle-click")
  40.         insertLinkElement(myDoc, el, tmpstr+":orig", getFilename(tmpstr));
  41.       } catch (e) { console.warn("error: ", e); }
  42.     }
  43. 	}
  44. }
  45.  
  46.  
  47. function insertLinkElement(myDoc, wrapElement, linkTarget, downloadName) {
  48. 	var newnode;
  49.   var parentnode;
  50.   
  51.   newnode = myDoc.createElement("a");
  52.   newnode.setAttribute("href", linkTarget);
  53.   newnode.setAttribute("target", "_blank");
  54.   newnode.setAttribute("download", downloadName);
  55.   parentnode = wrapElement.parentNode;
  56.   parentnode.replaceChild(newnode, wrapElement);
  57.   newnode.appendChild(wrapElement);
  58. }
  59.  
  60.  
  61. function getCleanImageURL(imageurl) {
  62.   var pos;
  63.   var pos2;
  64.  
  65.   pos = imageurl.toLowerCase().lastIndexOf(":");
  66.   pos2 = imageurl.toLowerCase().indexOf("/");
  67.   if (pos >= 0 && pos > pos2) {
  68.     return imageurl.substring(0, pos);
  69.   } else {
  70.     return imageurl; 
  71.   }
  72. }
  73.  
  74.  
  75. function getFilename(imageurl) {
  76.   return getCleanImageURL(imageurl).substring(imageurl.toLowerCase().lastIndexOf("/")+1);
  77. }
  78.  
  79.  
  80. // Two very different actions depending on if this is on twitter.com or twing.com
  81. if (window.location.href.includes('pbs.twimg.com/media')){
  82.  
  83.   var image;
  84.   var url;
  85.   
  86.   image = document.querySelector('img');
  87.   url = image.src;
  88.   insertLinkElement(document, image, getCleanImageURL(url)+":orig", getFilename(url));
  89.  
  90. }
  91. else 
  92. {
  93.  
  94.   // create an observer instance and iterate through each individual new node
  95.   var observer = new MutationObserver(function(mutations) {
  96.     mutations.forEach(function(mutation) {
  97.       mutation.addedNodes.forEach(function(addedNode) {
  98.         createImageLinks(mutation.target.ownerDocument, addedNode);
  99.       });
  100.     });    
  101.   });
  102.  
  103.   // configuration of the observer
  104.   // NOTE: subtree is false as the wanted nodes are direct children of <ol id="posts"> -> notable performance improvement
  105.   var config = { attributes: false, childList: true, characterData: false, subtree: false };
  106.  
  107.   // pass in the target node (<ol> element contains all dashboard posts), as well as the observer options
  108.   var postsmatch = document.evaluate("//ol[@id='stream-items-id']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  109.   //console.info("postsmatch: ", postsmatch);
  110.   var postsnode = postsmatch.singleNodeValue;
  111.   //console.info("postsnode: ", postsnode);
  112.  
  113.   //process already loaded nodes (the initial posts before scrolling down for the first time)
  114.   createImageLinks(document, postsnode);
  115.  
  116.   //start the observer for new nodes
  117.   observer.observe(postsnode, config);
  118.  
  119. }