简单的用户脚本很慢，有时无法正常工作

Question

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

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

我目前面临两个问题：

1. 脚本加载速度很慢，这意味着如果我使用箭头键更改幻灯片中的图像，我需要等待 1 或 2 秒，然后才能按下键盘快捷键在新选项卡中打开图像。如果我不等待，它将根据我跳过它们的速度，在新标签中打开幻灯片中以前的图像之一。 （它应该始终在新标签中打开我当前正在查看的图像）

2. 我使用 log(mainurl) 打印“mainurl”的当前内容，这是指向当前打开图像的最大可用尺寸的链接。但由于某种原因，它总是根据我跳过幻灯片的速度（即使在新标签页中打开了正确的图像），总是给我上一张图片的网址。

如果您想查看脚本，这里是指向 flickr 帐户的 URL。 （必须在照片流中运行[幻灯片模式]）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, "$1").replace(/\\/g, "").replace(/(_[a-z])\.([a-z]{3,4})/i, '$1' + "." + '$2');
    }
    $.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);
  }
});