javascript - 简单的用户脚本很慢,有时无法正常工作
问题描述
顺便说一句,我是 JS 新手,这是我的第一个脚本。
我正在编写一个小脚本,它应该允许我使用键盘快捷键在未聚焦的新标签页中打开 flickr 页面中最大的可用图像。
我目前面临两个问题:
脚本加载速度很慢,这意味着如果我使用箭头键更改幻灯片中的图像,我需要等待 1 或 2 秒,然后才能按下键盘快捷键在新选项卡中打开图像。如果我不等待,它将根据我跳过它们的速度,在新标签中打开幻灯片中以前的图像之一。(它应该始终打开我当前在新标签中查看的图像)
我使用 log(mainurl) 打印“mainurl”的当前内容,这是指向当前打开图像的最大可用大小的链接。但由于某种原因,它总是根据我跳过幻灯片的速度(即使在新标签中打开了正确的图像),总是给我以前图像之一的 url。
如果您想检查脚本,这里是指向 flickr 帐户的 URL。(它必须在 photostream [幻灯片模式] 中运行)flickr photostream 的 URL
这是我写的代码
// ==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);
非常感谢您的帮助!
解决方案
最好拦截站点向其服务器 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);
}
});
推荐阅读
- typescript - 在 Typescript 中键入键值对对象并保存对象的键
- python - 'numpy.float64' 对象不可迭代——独立工作但不在 for 循环中
- ios - 根据图像高度对位于uitableviewcell中的collectionviewcell设置动态高度约束
- python - 如何在大熊猫组之间比较和分组配对值
- c++ - C++ 中的一项操作
- azure - 将 CI 和 CD 集成在一起 Azure Devops
- ios - WkWebView 无法重置 Cookie
- prolog - SWISH Prolog 阶乘误差
- c# - 快速在搜索文本框中键入以更改数据网格的行选择时引发异常
- scala - 使用 ForeachWriter 打印行