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

Question

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

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

我目前面临两个问题:

1. 脚本加载速度很慢，这意味着如果我使用箭头键更改幻灯片中的图像，我需要等待 1 或 2 秒才能按键盘快捷键在新选项卡中打开图像。如果我不等待，它会根据我跳过它们的速度，在新标签中打开幻灯片放映中的先前图像之一。 (它应该总是在新标签页中打开我当前正在查看的图片)

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

如果您想检查脚本，这里是一个 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 并 Hook XMLHttpRequest 原型(prototype)。还可以在 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);
  }
});