// ==UserScript== // @name TwitterImgViewer // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://twitter.com/* // @grant none // ==/UserScript== (function() { function createImgViewer() { var html = ` <div id='divViewer' style=' position: fixed; height: 100%; width: 100%; top:0; left:0; text-align:center; background-color:rgba(0,0,0,0.3);'> <table style='margin-top:2.5vh; margin-top:;margin-left:auto;margin-right:auto;'> <tr> <td style='padding:0;width:3em;text-align:center;'><button id='btnPrev' style='width:2em;height:100%;'>p<br>r<br>e<br>v</button</td> <td style='padding:0'width:auto;text-align:center;'><img id='imgMain' style='height: 95vh;'></td> <td style='padding:0;width:3em;text-align:center;'><button id='btnNext' style='width:2em;height:100%;'>n<br>e<br>x<br>t</button</td> </tr> </table> </div>`; document.body.insertAdjacentHTML("beforeend", html); // 画像を取得して、ツイートのリンクURL順に並べ替え var imgList = [...document.querySelectorAll("img[src*='https://pbs.twimg.com/media/']")] .filter(el=> el.closest("a[href]") != null) .sort((el1, el2) => el1.closest("a[href]").href > el2.closest("a[href]").href ) .map(el=>el.src.replace(/&name.*$/, '')); var currIdx = 0; var showPage = function(plus) { currIdx += plus; if (currIdx<0) { currIdx = 0; } if (currIdx>imgList.length-1) { currIdx = imgList.length-1; } document.querySelector("#imgMain").src = imgList[currIdx]; }; showPage(0); document.querySelector("#btnPrev").addEventListener("click", () => showPage(-1) ); document.querySelector("#btnNext").addEventListener("click", () => showPage(+1) ); document.body.addEventListener("keydown", (ev) => { if (ev.keyCode == 27) { document.querySelector("#divViewer").remove(); } if (ev.keyCode == 37) { showPage(-1); } if (ev.keyCode == 39) { showPage(+1); } }); } setTimeout(() => { var buttonParent = document.querySelector("a[aria-label='ツイートする']").parentElement; buttonParent.insertAdjacentHTML("beforeend", "<button id='btnViewer' style='margin-top:2em;padding:5px;'>Viewer</button>"); document.querySelector("#btnViewer").addEventListener("click", createImgViewer); }, 1000); })();