We Keep Coding

Trying to click an <a> link using JQuery but the tag doesn't have any descriptors

I would like to click on a link on the website http://www.furaffinity.net/view/33063264/ but the <a> element has no description factors so, I have no idea how to find it properly. This may be set as a duplicate of my other question but, this will be more descriptive and better organized.
JSFiddle: https://jsfiddle.net/60obtL8v/
I have tried using JQuery to locate the element with no luck. I don't know if my code was wrong or not. I've deleted the code and would've liked to find it again but, I couldn't.
My JS script:
// ==UserScript==
// #name Say "Very Nice!"
// #namespace http://tampermonkey.net/
// #version 0.1
// #description Say "Very Nice" on a post by clicking the button.
// #author You
// #match https://www.furaffinity.net/view/*
// #match http://www.furaffinity.net/view/*
// #match www.furaffinity.net/view/*
// #grant none
// ==/UserScript==
function addButton(text, onclick, cssObj) {
cssObj = cssObj || {position: 'absolute', bottom: '15%', left:'4%', 'z-index': 3}
let button = document.createElement('button'), btnStyle = button.style
document.body.appendChild(button)
button.innerHTML = text
button.onclick = onclick
Object.keys(cssObj).forEach(key => btnStyle[key] = cssObj[key])
return button
}
(function(){
'use strict'
window.addEventListener('load', () => {
addButton('Very Nice!', gfg_Run)
})
var el_down = document.getElementById("JSMessage");
var inputF = document.getElementById("JSMessage");
var yeet = document.getElementsByClassName('button');
var inputH = document.getElementsByTagName("a");
function gfg_Run() {
inputF.value = "Very Nice!";
el_down.innerHTML =
"Value = " + "'" + inputF.value + "'";
yeet[0].click();
inputH.click();
}
}())
My expected results are that I could click on the <a> tag by clicking on a button elsewhere on the page. I have no idea how i would even locate the element, as it is under a <div> and a <b> element.
An example of what the HTML of the page looks like:
<div class="alt1 actions aligncenter" style="margin-top: 8px;">
This is what i would like to click right here. --->
<b>+Add to Favorites</b> |
<b>Download</b> |
<b>Full View</b> | <b>Send note</b>
<div>Submission © 2019 Legacy2988</div>
</div>
Hopefully, I structured this question correctly.

The code looks like pure JS but in jQuery you can use the attribute selector to select the href and perform the action:
jQuery('a[#href*=/fav/33151503/?key=37dfe6a83f38f48790a6551921ddb13850e2c6a0]');
OR
$('a[#href*=/fav/33151503/?key=37dfe6a83f38f48790a6551921ddb13850e2c6a0]');

How to use an image file that is locally downloaded via #resource, as an icon in a `input` element

I have this script for greasemonkey to add a send PM to user "button" (which is essentially an input element)
to e.g. this page https://greasyfork.org/en/users/2160-darkred
My code that currently adds the "button" successively is:
var referenceNode = document.querySelector('div.width-constraint:nth-child(2) > h2:nth-child(1)');
var a = document.createElement('input');
referenceNode.appendChild(a);
a.style.padding = '0px 12px';
a.setAttribute('type', 'image');
a.setAttribute('src', 'http://i.imgur.com/ZU0xS0c.jpg');
I want to change the code, so that the button icon is downloaded once (as #resource, instead).
So, based on this and this, I tried to change my code into:
// ==UserScript==
// #grant GM_getResourceURL
// #resource icon http://i.imgur.com/ZU0xS0c.jpg
// ==/UserScript==
var referenceNode = document.querySelector('div.width-constraint:nth-child(2) > h2:nth-child(1)');
var a = document.createElement('input');
referenceNode.appendChild(a);
a.style.padding = '0px 12px';
a.setAttribute('type', 'image');
a.setAttribute('src', GM_getResourceURL('icon') );
The problem is that the button now doesn't use the icon file
(its displayed as text: 'Submit Query' instead).
What is wrong with my code?

How to make a GreaseMonkey script affect elements in a page before they're displayed?

I'm trying to ensure that images in a certain website are not displayed, but the alt text is still displayed. Initially I attempted to accomplish this with Stylish (using Firefox) and asked the following question:
How to force an image's alt text to display instead of the image?
The accepted answer provided me with an alternative solution using Greasemonkey. The script uses waitForKeyElements to hide images even if they're added using AJAX.
I changed the given script to the following:
// ==UserScript==
// #name _Hide pics except for alt text
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// ==/UserScript==
GM_addStyle ( " \
* { \
background-image: none !important; \
} \
" );
waitForKeyElements ("img", hideImageExceptForAltText);
function hideImageExceptForAltText (jNode) {
var imgAlt = jNode.attr("alt");
var imgTitle = jNode.attr("title");
jNode.css("display", "none");
var newSpan = $("<span></span>");
newSpan.attr("title", imgTitle);
newSpan.append(imgAlt);
jNode.parent().append(newSpan);
}
Just like the original script, this has the problem that the images are still displayed for a few moments as the page is loading.
Is it possible to ensure that the given function will prevent images on a page from being displayed immediately, so that they won't be visible at all?
EDIT: Brock Adams' reply had the clue I was missing. In case anyone is looking for something like this, the following is what I ended up using. It works fine on the site I needed it for, but I can't guarantee it will work on other sites or other browsers than Firefox.
The following hides images and replaces them with a link (except for background images). Clicking that link will display the image.
// ==UserScript==
// #name TCRF images
// #namespace SOMETHING
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #version 1
// #grant GM_addStyle
// #run-at document-start
// ==/UserScript==
GM_addStyle ( "\
* {\
background-image: none !important;\
}\
\
img.gmImgHideHidden {\
display: none !important;\
}\
" );
var num = 0;
function gmImgHideShowImg(imgId, linkId)
{
// Using plain JavaScript because the page itself may not have jquery
var img = document.getElementById(imgId);
img.className = img.className.replace( /(?:^|\s)gmImgHideHidden(?!\S)/g , '' );
var lnk = document.getElementById(linkId);
lnk.parentNode.removeChild(lnk);
}
// Exporting the "show image" function so that it can be used in the webpage
unsafeWindow.gmImgHideShowImg = exportFunction(gmImgHideShowImg, unsafeWindow);
waitForKeyElements ("img", hideImageExceptForAltText);
function hideImageExceptForAltText (jNode) {
var imgId = jNode.attr("id");
// Ensuring an id exists so the image can be searched for later
if(typeof(imgId) == "undefined")
{
imgId = "gmImgHideImg" + num;
jNode.attr("id", imgId);
}
var imgDisp = jNode.css("display");
var imgAlt = jNode.attr("alt");
jNode.addClass("gmImgHideHidden");
var linkId = "gmImgHideLink" + num;
var linkNode = $("<a></a>");
linkNode.attr("id", linkId);
linkNode.append("Image: " + imgAlt);
linkNode.attr("onclick", "gmImgHideShowImg('" + imgId + "', '" + linkId + "'); return false;");
jNode.parent().append(linkNode);
num++;
}

MutationObserver is without a doubt the best solution here. Combined with early injection by #run-at document-start we can make the script pretty much bullet-proof. Check out this fiddle (tested with Firefox 40) to see it in action.
I think the code is pretty self-explanatory. I've annotated the subtleties, but leave a comment if there's anything you don't understand.
// ==UserScript==
// #run-at document-start
// ==/UserScript==
"use strict";
/* part one: <img> elements */
(new MutationObserver(function(Records, Obs) {
for (let R of Records) {/* examine each mutation record: */
/* if the record specifies an attribute mutation… */
if (
R.attributeName === "src" &&
(R.target instanceof Element) && /* this check might be necessary */
R.target.tagName.toLowerCase() === "img" &&
R.target.getAttribute("src") !== "" /* avoid infinite loop */
) {
R.target.setAttribute("src", "");
};
/* if the record specifies a sub-element mutation… */
for (let N of R.addedNodes) {
if (
(N instanceof Element) && /* this check might be necessary */
N.tagName.toLowerCase() === "img" &&
N.getAttribute("src") !== "" /* avoid infinite loop */
) {
N.setAttribute("src", "");
};
};
};
})).observe(document, {
/* changes wot we listen for */
childList : true,
subtree : true,
attributes : true
});
/* part two: background-image styles */
let check_for_head_elem = function(_, Obs) {
if (!document.head) {return;};
Obs.disconnect();
/* apply our style */
let Style = document.createElement("style");
document.head.appendChild(Style);
Style.sheet.insertRule("* {background-image : none !important;}", 0);
};
let check_for_root_elem = function(_, Obs) {
if (!document.documentElement) {return;};
Obs.disconnect();
/* observe until the <head> element is added */
Obs = new MutationObserver(check_for_head_elem)
Obs.observe(document.documentElement, {childList : true});
check_for_head_elem(null, Obs); /* check here because it might exist already */
};
{/* observe until the <html> element is added */
let Obs = new MutationObserver(check_for_root_elem);
Obs.observe(document, {childList : true});
check_for_root_elem(null, Obs); /* check here because it might exist already */
};
There are some other ways to get images on the page that I haven't taken into consideration (<iframe>, <svg>, <canvas>, <li> bullet points), but if necessary you should be able to use mutation observers or CSS to take care of those too.

A simple, robust way to do this is to set CSS first-thing, before any of the rest of the page loads.
#run-at document-start and GM_addStyle() do this. (on Firefox; not tested on latest Tampermonkey)
That way, the images are not displayed even for a fraction of a second, like they are with the original code or with a complicated, finicky MutationObserver approach.
This complete script shows the process:
// ==UserScript==
// #name _Hide pics except for alt text
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #grant GM_addStyle
// #run-at document-start
// ==/UserScript==
GM_addStyle ( " \
* { \
background-image: none !important; \
} \
img { \
display: none !important; \
} \
" );
/*--- $(document).ready() is not always needed for modern Firefox, but
use for maximum portability, when script runs at document-start.
*/
$(document).ready ( function () {
waitForKeyElements ("img", hideImageExceptForAltText);
} );
function hideImageExceptForAltText (jNode) {
var imgAlt = jNode.attr("alt") || "";
var imgTitle = jNode.attr("title") || "";
jNode.after ('<span title="' + imgTitle + '">' + imgAlt + '</span>');
}

How to create 1-click Copy links?

For this linkify plus script, I'm trying to make the href links 1-click copy to the clipboard, using GM_Setclipboard.
The script works fine if the webpage in question only finds and "linkifies" one string of text. If it linkifies two strings, the 1-click copy function works on both links but will only copy the last string to be "linkified".
I'm not even sure what I am trying to do is possible. Found some similar questions/workarounds that use flash+jQuery+zeroClipboard. But not sure if I can implement this into a Greasemonkey script.
// ==UserScript==
// #name 1Click_COPY
// #include http*://www.w3schools.com/*
// $Revision: #2 $
// ==/UserScript==
// Originally written by Anthony Lieuallen of http://www.arantius.com/
// Licensed for unlimited modification and redistribution as long as this notice is kept intact.
//
// If possible, please contact me regarding new features, bugfixes
// or changes that I could integrate into the existing code instead of
// creating a different script. Thank you
(function (){
function linkify () {
try {
var notInTags=['a', 'head', 'noscript', 'option', 'script', 'style', 'title', 'textarea'];
var res = document.evaluate("//text()[not(ancestor::"+notInTags.join(') and not(ancestor::')+")]",
document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i, el, l, m, p, span, txt, urlRE, linky;
//The string you want to find using reg ex. This finds http to create links.
urlRE=/\b(https?:\/\/[^\s+\"\<\>]+)/ig.
for (i=0; el=res.snapshotItem(i); i++) {
//grab the text of this element and be sure it has a URL in it
txt=el.textContent;
span=null;
p=0;
while (m=urlRE.exec(txt)) {
if (null==span) {
//create a span to hold the new text with links in it
span=document.createElement('span');
}
//get the link without trailing dots
l=m[0].replace(/\.*$/, '');
//put in text up to the link
span.appendChild(document.createTextNode(txt.substring(p, m.index)));
//create a link and put it in the span
a=document.createElement('a');
a.className='linkifyplus';
a.appendChild(document.createTextNode(l));
a.setAttribute('href', l);
//a.setAttribute('onclick', "return false");
//linky=a.getAttritube('href');
//a.setAttritube("onclick", function() { GM_setClipboard(l, 'text')
} );
//copy text to clipboard
a.onclick = function() { GM_setClipboard(l, 'text'); return false};
span.appendChild(a);
p=m.index+m[0].length;
}
// This removes the non linked text
if (span) {
//take the text after the last link
span.appendChild(document.createTextNode(txt.substring(p, txt.length)));
//replace the original text with the new span
el.parentNode.replaceChild(span, el);
}
}
}
catch(e) {dump('Linkify Plus Error ('+e.lineNumber+'): '+e+'\n');}
}
window.addEventListener("load", linkify, false);
} ) ();

Use Anthony Lieuallen latest v2.0.2 of the script. GM_setClipboard works like a charm now. See below:
// ==UserScript==
// #name Linkify Plus
// #version 2.0.2
// #namespace http://arantius.com/misc/greasemonkey/
// #description Turn plain text URLs into links. Supports http, https, ftp, email addresses.
// #grant GM_setClipboard
// ==/UserScript==
/*******************************************************************************
Loosely based on the Linkify script located at:
http://downloads.mozdev.org/greasemonkey/linkify.user.js
Originally written by Anthony Lieuallen of http://arantius.com/
Licensed for unlimited modification and redistribution as long as
this notice is kept intact.
If possible, please contact me regarding new features, bugfixes
or changes that I could integrate into the existing code instead of
creating a different script. Thank you.
Version history:
Version 2.0.3:
- Fix infinite recursion on X(HT)ML pages.
Version 2.0.2:
- Limit #include, for greater site/plugin compatibility.
Version 2.0.1:
- Fix aberrant 'mailto:' where it does not belong.
Version 2.0:
- Apply incrementally, so the browser does not hang on large pages.
- Continually apply to new content added to the page (i.e. AJAX).
Version 1.1.4:
- Basic "don't screw up xml pretty printing" exception case
Version 1.1.3:
- Include "+" in the username of email addresses.
Version 1.1.2:
- Include "." in the username of email addresses.
Version 1.1:
- Fixed a big that caused the first link in a piece of text to
be skipped (i.e. not linkified).
*******************************************************************************/
var notInTags=[
'a', 'head', 'noscript', 'option', 'script', 'style', 'title', 'textarea'
];
var textNodeXpath=
".//text()[not(ancestor::ns:"+notInTags.join(') and not(ancestor::ns:')+")]";
//Insert Your personal Regex below. (My example: ip + port in "xxx.xxx.xxx.xxx PORT" format)
var urlRE=/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\s\d{1,5}\b/gi;
var queue=[];
/******************************************************************************/
linkifyContainer(document.body);
document.body.addEventListener('DOMNodeInserted', function(event) {
linkifyContainer(event.target);
}, false);
/******************************************************************************/
function linkifyContainer(container) {
var xpathResult=document.evaluate(
textNodeXpath,
container,
{ lookupNamespaceURI: function(prefix) { return container.namespaceURI; } },
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null
);
var i=0;
function continuation() {
var node, counter=0;
while (node=xpathResult.snapshotItem(i++)) {
linkifyTextNode(node);
if (++counter>50) {
return setTimeout(continuation, 0);
}
}
}
setTimeout(continuation, 0);
}
function linkifyTextNode(node) {
var i, l, m;
var txt=node.textContent;
var span=null;
var p=0;
while (m=urlRE.exec(txt)) {
if (null==span) {
//create a span to hold the new text with links in it
span=document.createElement('span');
}
//get the link without trailing dots
l=m[0].replace(/\.*$/, '');
//put in text up to the link
span.appendChild(document.createTextNode(txt.substring(p, m.index)));
//create a link and put it in the span
a=document.createElement('a');
a.appendChild(document.createTextNode(l));
//if (l.match(/^www/i)) {
// l='http://'+l;
//} else if (-1==l.indexOf('://')) {
// l='mailto:'+l;
//}
a.setAttribute('href', l);
a.onclick = function() { GM_setClipboard(l, 'text'); return false};
span.appendChild(a);
//track insertion point
p=m.index+m[0].length;
}
if (span) {
//take the text after the last link
span.appendChild(document.createTextNode(txt.substring(p, txt.length)));
//replace the original text with the new span
try {
node.parentNode.replaceChild(span, node);
} catch (e) {
console.error(e);
console.log(node);
}
}
}

http://www.htmlgoodies.com/beyond/javascript/article.php/3458851
See if this helps.
I am right now on phone so can't explore much. Will try once I get on a system.

Add dynamic div-layers (overlay) with a Greasemonkey script?

I am new to this so please be kind (;
I'm trying to use Greasemonkey to add div-layers and I just can't get it to work properly.
My final goal is to let the user draw a window on the screen (or make two clicks) and everything but this area should kind of fade out (added dark div-layers).
But, for now I just wanted to add a visible layer to every site. Here is my first try (which did not work at all) :
var CSSNJE = '#Test_divnje {height:100px; width:100px; background-color:red;
position:absolute; top: 200px; left: 400px; z-index:2147483647}';
var CSSNJE = '<style type="text/css">'+ CSSNJE +'</style>';
document.write(CSSNJE);
var DIVNJE = '<DIV id="Test_divnje"></DIV>';
document.write(DIVNJE);
I Googled this piece of code, which works for some pages but not many:
makeLayer('LYR1',400,250,100,100,'red',1,2147483647);
function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) {
if (document.getElementById) {
if (document.getElementById(id)) {
alert ('Layer with this ID already exists!');
return;
}
var ST = 'position:absolute'
+'; left:'+L
+'; top:'+T
+'; width:'+W
+'; height:'+H
+'; clip:rect(0,'+W+','+H+',0)'
+'; visibility:'
+(null==visible || 1==visible ? 'visible':'hidden')
+(null==zIndex ? '' : '; z-index:'+zIndex)
+(null==bgColor ? '' : '; background-color:'+bgColor);
var LR = '<DIV id='+id+' style="'+ST+'"></DIV>'
if (document.body) {
if (document.body.insertAdjacentHTML)
document.body.insertAdjacentHTML("BeforeEnd",LR);
else if (document.createElement
&& document.body.appendChild) {
var newNode = document.createElement('div');
newNode.setAttribute('id',id);
newNode.setAttribute('style',ST);
document.body.appendChild(newNode);
}
}
}
}
First I thought the z-index of my div-layer was too low and my div-layer was just behind the visible layers (that's why my index is so high right now) but using a higher index did not help.
I also tried do use position:fixed because I read that this would maybe help, but it didn't.
How can I make an overlay that works?

Since you are starting out, use jQuery and (in this case) jQuery-UI. It makes coding vastly simpler, and will save you a ton of grief from trying to "reinvent the wheel" the hard way.
In jQuery-UI, two-thirds of what the question asks for is accomplished in 1 line of code:
$("#dialog").dialog ( {modal: true} );
Note that this is drag-able and sizable, right out of the box!
With Greasemonkey on Firefox, there is almost no cost to using jQuery, and jQuery-UI, either. The scripts are downloaded one time (when the script is installed or edited) and then run from the local machine. It's nice and fast.
Here is a complete Greasemonkey script that adds "a layer" with a re-sizable window to Stack Overflow pages:
// ==UserScript==
// #name _Add a User-interactive layer to a web page.
// #namespace _pc
// #include http://stackoverflow.com/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// #require http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
// #resource jqUI_CSS http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
// #resource IconSet1 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png
// #resource IconSet2 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_454545_256x240.png
// #grant GM_addStyle
// #grant GM_getResourceText
// #grant GM_getResourceURL
// ==/UserScript==
//--- Add our custom dialog using jQuery. Note the multi-line string syntax.
$("body").append (
'<div id="gmOverlayDialog"> \
Resize with the control in the lower-left, or by dragging any edge.<br><br> \
\
Click the x, or press the Escape key to close. \
</div> \
'
);
//--- Activate the dialog.
$("#gmOverlayDialog").dialog ( {
modal: true,
title: "Click and drag here.",
zIndex: 83666 //-- This number doesn't need to get any higher.
} );
/**********************************************************************************
EVERYTHING BELOW HERE IS JUST WINDOW DRESSING (pun intended).
**********************************************************************************/
/*--- Process the jQuery-UI, base CSS, to work with Greasemonkey (we are not on a server)
and then load the CSS.
*** Kill the useless BG images:
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
url(images/ui-bg_flat_75_ffffff_40x100.png)
url(images/ui-bg_glass_55_fbf9ee_1x400.png)
url(images/ui-bg_glass_65_ffffff_1x400.png)
url(images/ui-bg_glass_75_dadada_1x400.png)
url(images/ui-bg_glass_75_e6e6e6_1x400.png)
url(images/ui-bg_glass_95_fef1ec_1x400.png)
url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)
*** Rewrite the icon images, that we use, to our local resources:
url(images/ui-icons_222222_256x240.png)
becomes
url("' + GM_getResourceURL ("IconSet1") + '")
etc.
*/
var iconSet1 = GM_getResourceURL ("IconSet1");
var iconSet2 = GM_getResourceURL ("IconSet2");
var jqUI_CssSrc = GM_getResourceText ("jqUI_CSS");
jqUI_CssSrc = jqUI_CssSrc.replace (/url\(images\/ui\-bg_.*00\.png\)/g, "");
jqUI_CssSrc = jqUI_CssSrc.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1);
jqUI_CssSrc = jqUI_CssSrc.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2);
GM_addStyle (jqUI_CssSrc);
//--- Add some custom style tweaks.
GM_addStyle ( ' \
div.ui-widget-overlay { \
background: red; \
opacity: 0.6; \
} \
' );