问题描述
您好,我创建了我的greasemonkey 用户脚本按钮以从https://flathub.org/apps/details/com.github.rafostar.Clapper 进入我的剪贴板flatpak install flathub com.github.rafostar.clapper # clapper Simple and modern GNOME media player
,因此每次我想复制到我的安装脚本中时都不需要手动执行此操作。
但问题是在第一个 for 循环之后我的脚本停止执行我放入我的脚本 console.log("a");
进行测试,它们也没有执行。
// ==UserScript==
// @name Flathub copy command
// @name:cs Flathub zkopírovat příkaz
// @version 1
// @description put install command with name of app in to clipboard
// @grant none
// @match https://flathub.org/apps/details/*
// ==/UserScript==
// KNowlage Base:
// [Greasemonkey Tutorial for Beginners](http://hayageek.com/greasemonkey-tutorial/)
// [HTML DOM Event Object](https://www.w3schools.com/jsref/dom_obj_event.asp)
(function() {
window.addEventListener("load",() => {
addButton("copy Command");
});
function addButton(text,onclick,cssObj) {
cssObj = cssObj || {
position: "fixed",top: "65%",right: "4%","z-index": 3,fontWeight: "600",fontSize: "14px",backgroundColor: "#00cccc",color: "white",border: "none",padding: "10px 20px"
};
let button = document.createElement("button"),btnStyle = button.style;
document.body.appendChild(button);
button.innerHTML = text;
button.id ="btn"
// Settin function for button when it is clicked.
button.onclick = selectReadFn;
Object.keys(cssObj).forEach(key => (btnStyle[key] = cssObj[key]));
return button;
}
function selectReadFn() {
var property = document.getElementById("btn");
// When button is pressed
this.innerHTML = "Command copied";
property.style.backgroundColor = "#002929";
// get install command
const commands = document.getElementsByClassName('mat-tooltip-trigger'); // Return: HTMLCollection
const re = /flatpak install.*/;
// iterate using for...of loop
for (const s of commands) {
var str = s.innerText;
var ar = str.match(re);
var command = ar.toString();
console.log(command);
}
console.log("a");
// get header
const h = document.getElementsByTagName("h2");
console.log(h);
for (const s of h) {
console.log(s);
console.log("a");
var header = s.innerText;
console.log(header);
console.log("a");
}
// get description
const d = document.getElementsByClassName("app-details-main-summary");
for (const s of d) {
console.log("a");
console.log(s);
var description = s.innerText;
console.log(description);
console.log("a");
}
//console.log(commands);
GM.setClipboard( command + " # " + header + " " + description )
}
})();
解决方法
请注意:
-
设置
// @grant none
时,GM.setClipboard
将不起作用。你需要// @grant GM.setClipboard
。 -
设置
@run-at document-idle
会更容易,因此不需要window.addEventListener("load"....)
-
快得多textContent
比innerHTML
&innerText
-
Firefox 74+ 支持可选链接
?.
以下是基于您的代码的简化示例(可以进一步简化)。
// ==UserScript==
// @name Flathub copy command
// @name:cs Flathub zkopírovat příkaz
// @version 1
// @description put install command with name of app in to clipboard
// @grant GM.setClipboard
// @match https://flathub.org/apps/details/*
// @run-at document-idle
// ==/UserScript==
(() => { // anonymous function wrapper
'use strict';
addButton('Copy Command');
function addButton(text,css) {
css = css || `
position: fixed;
top: 65%;
right: 4%;
z-index: 3;
fontWeight: 600;
fontSize: 14px;
background-color: #0cc;
color: white;
border: none;
padding: 10px 20px;
`;
const button = document.createElement('button');
button.style = css;
button.textContent = text;
document.body.appendChild(button);
button.onclick = copy;
}
function copy(e) {
// get install command
const command = [...document.querySelectorAll('.mat-tooltip-trigger')]
.find(item => item.textContent.includes('flatpak install'))?.textContent;
if (!command) {
console.log('command not found');
return;
}
// get header
const header = document.querySelector('h2')?.textContent;
if (!header) {
console.log('header not found');
return;
}
// get description
const description = document.querySelector('.app-details-main-summary')?.textContent;
if (!description) {
console.log('description not found');
return;
}
// copy to clipboard
console.log(command + ' # ' + header + ' ' + description);
GM.setClipboard(command + ' # ' + header + ' ' + description);
// show result
this.textContent = 'Command copied';
this.style.backgroundColor = '#002929';
}
// end of anonymous function
})();