Simple Userscript 速度很慢，有时无法正常工作

Question

顺便说一下，我是 JS 的新手，这是我的第一个脚本。

我正在编写一个小脚本，它应该允许我使用键盘快捷键在未聚焦的 newtab 中打开 flickr 页面中最大的可用图像。

我目前面临两个问题：

脚本加载速度慢，这意味着如果我使用箭头键更改幻灯片中的图像，我需要等待 1 或 2 秒才能按键盘快捷键打开图像在新标签中。如果我不等待，它会根据我跳过它们的速度，在新标签中打开幻灯片放映中的先前图像之一。（它应该总是在新标签页中打开我当前正在查看的图片）
我使用 log(mainurl) 来打印 "mainurl" 的当前内容，即 link 当前打开图像的最大可用尺寸.但出于某种原因，它总是给我之前一张图片的 url，这取决于我跳过幻灯片的速度（即使在 newtab 中打开了正确的图片）。

如果您想查看脚本，请点击此处 URL 到 flickr 帐户。（在照片流[幻灯片模式]中必须是运行）URL to flickr photostream

这是我写的代码

// ==UserScript==
// @name         Flickr Max NewTab
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Open Max sized flickr image in a new tab using key shorcut
// @author       Newbie
// @include     /flickr\.com/
// @grant       GM_openInTab
// @require     https://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==

var page ='';
var sizes = [];
var links = [];
var length = 0;
var mainurl = '';

function geturl() { // function used to get the link of biggest image
    var action = function (sourceCode) {
        sizes = sourceCode.match(/modelExport: {.+?"sizes":{.+?}}/i); // extract the part of html that containes modelExport:
        links = sizes[0].match(/"displayUrl":"[^"]+"/ig); // extract the urls dictionary from the dictionary modelExport:
        length = links.length; //get the length of the dictionary "links"
        // extract the last(biggest) url from the links dictionary and put them in an array "links"
        mainurl = links[links.length-1].replace(/"displayUrl":"([^"]+)"/i, "").replace(/\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '' + "." + '');
    }
    $.get(document.URL, action);
}

function log(x) {
    console.log(x);
}
// function used to get to run the url grabber everytime you change the image in slideshow using arrowkeys
function navigation (e) {
    if (e.keyCode == 37 || e.keyCode == 39) {
        geturl();
        log(mainurl);// log to check the current contents of mainurl
    }
}
// function used to open image in a newtab when "alt + Q" are pressed
function newtab (e) {
    if (e.altKey && e.keyCode == 81) {
        GM_openInTab(mainurl);
    }
}

geturl(); //run the function

document.addEventListener('keyup', navigation);
document.addEventListener('keydown', newtab);

非常感谢您的帮助！

Answer 1

最好拦截站点对其服务器发出的现有快速请求API（您可以在 devtools 网络面板中检查它），而不是发出额外的慢速请求。

为此，我们将使用 unsafeWindow 并挂钩 XMLHttpRequest 原型。运行 document-start 处的脚本，因此它会在页面发出请求之前附加拦截器。

// ==UserScript==
// @name        Flickr Max NewTab
// @match       https://www.flickr.com/*
// @grant       GM_openInTab
// @run-at      document-start
// ==/UserScript==

const xhrOpen = unsafeWindow.XMLHttpRequest.prototype.open;
unsafeWindow.XMLHttpRequest.prototype.open = function (method, url) {
  if (/method=[^&]*?(getPhotos|getInfo)/.test(url)) {
    this.addEventListener('load', onXhrLoad, {once: true});
  }
  return xhrOpen.apply(this, arguments);
};

const imgUrls = {};

function onXhrLoad() {
  const json = JSON.parse(this.response);
  const photos = json.photos ? json.photos.photo : [json.photo];
  for (const {id, url_o} of photos) {
    imgUrls[id] = url_o;
  }
}

document.addEventListener('keydown', e => {
  if (e.altKey && e.code === 'KeyQ' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
    const id = location.pathname.split('/')[3];
    const url = imgUrls[id];
    if (url) GM_openInTab(url, true);
  }
});

Simple Userscript 速度很慢，有时无法正常工作

Simple Userscript is slow and sometimes doesn't work correctly

javascript

jquery

userscripts

tampermonkey