Greasemonkey to Modify Text based on other parts of the webpage? - javascript

The Backstory:
I am looking to improve a Fantasy Football webpage by adding stats of the players in real-time. Let's assume we are using this page as a reference. For each player, it lists the position they play (i.e. QB, WR, etc) and also the team they play against.
My Current Code:
#BrockAdams answered my question yesterday and was able to assemble a table that contained the team name, position, and the rank. Here is a sample of the table:
What I am looking to accomplish is lookup the rank in the table based on the opposing team and my players position and add it to the end of the string.
What I Have Done:
The string that contains my players position can be found using document.querySelectorAll('span[class="Fz-xxs"]')[#].innerText.split(" - ").slice(-1)[0] where # is between 0 and 33
The string that contains the opponents team can be found using document.querySelectorAll('a[class="F-reset"]')[#].innerText.split(" ").slice(-1)[0] where # is once again between 0 and 33
The Problem:
What my question is, how can I modify my script to append the rank # to the end of the string based on my players position and the opposing team?
A small issue I found is that anytime a user loads the fantasy page, my script will re-fetch all the teams position + ranks even though they only change once a week. Is there a good method to store the values in the browser and have it update only once a week?
Here is a picture of what the final result should look like. This was from a script created last year but because Yahoo modified their site, the old script no longer works.
Edit: Here is a portion of the existing HTML code.
<td class="Ta-start player Ta-start Bdrx">
<div class="Ov-h Mx-a">
<div>
<div class="Grid-bind-end">
<span class="player-status Grid-u Lh-xs">
<a id="playernote-25718" href="http://sports.yahoo.com/nfl/players/25718/news" target="sports" class="playernote Ta-start yfa-icon Z-1 playernote-recent"><span class="ysf-player-icon ysf-player-icon-notes yfa-icon playernote-recent" title="Player notes">Player Note</span></a>
</span>
<div class="ysf-player-name Nowrap Grid-u Relative Lh-xs Ta-start"><a class="Nowrap" href="http://sports.yahoo.com/nfl/players/25718" target="sports">R. Tannehill</a> <span class="Fz-xxs">Mia - QB</span> </div>
</div>
<div class="Grid-bind-end">
<span class="ysf-player-status F-injury Fz-xxs Grid-u Lh-xs"></span>
<div class="ysf-player-detail Nowrap Grid-u Fz-xxs Lh-xs Ta-start"><span class="ysf-game-status "><a class="F-reset" href=".../miami-dolphins-washington-redskins.../" target="sports" onclick="pop(this)">Sun 10:00 am # Was</a></span></div>
</div>
</div>
</div>
</td>
The only modification the code will make will be to change Sun 10:00 am # Was to Sun 10:00 am # Was - 1 for example. The screenshot above should make it clear. The page it will be modifying is This one.
Edit2: I made a small version in jsFiddle but I am having trouble appending this to the greasemonkey script Brock created.

Related

Play a sound/notification each time a particular user messages on an existing website

I am a user on a website that has a chat widget - users can chat with an instructor.
Every time the instructor sends a message, I would like to receive an audio notification (and optionally a browser notification would be cool too). It's important that I catch these right away and they're pretty easy to miss.
Note: It is something I will be using every day. I understand it's possible to run code right in the console, but that is a bit ad hoc and relies on me to add it successfully during every chat session.
FYI - The code of each chat message from the instructor looks like this:
<ul ng-class="{'notEducator': 'xyz,shanetech' == undefined, 'notEducator': 'xyz,shanetech' == '', 'notEducator': 0 == - 1, 'educator': 0 >=0, 'me':'xyz' == 'abc', 'notMe':'xyz' != 'abc'}" class="chat ng-scope educator notMe" data-ng-repeat="k in previousMessages track by $index">
<div class="main-msg-container xyz">
<div ng-class="{'hideMsgContainer':'' == '0'}" class="msg-container_5e9871f3e6eee5732cee3a1c">
<strong class="primary-font ng-binding">xyz</strong>
<li class=" clearfix">
<div class="chat-body clearfix">
<div class="header">
<small class="pull-right text-muted ng-binding">
<span class="glyphicon glyphicon-time"></span>16-04-2020 07:55:47
</small>
</div>
<p data-ng-bind-html="k.message | to_trusted" class="edu_message_5e9871f3e6eee5732cee3a1c">msg</p>
</div>
</li>
</div>
</div>
</ul>
One unique feature I notice vs regular user chat messages is the presence of the educator class in the ul tag.
Another differentiator taken from the ng-class attribute:
'notEducator': -1 == - 1, 'educator': -1 >=0 <- Me
notEducator': 0 == - 1, 'educator': 0 >=0 <- Host
Assuming you're trying to run code on a web app that you can't modify the code of, like the Zoom we app, here's a non-intrusive approach:
If you're trying to trigger a browser notification when something changes in the DOM, you can do so using chrome code snippets. I'm guessing you have a container element and you want to trigger a notification when that container node is changed and the last child element has a specific class to signify that it is a message from educator.
To simplify this scenario so it's easier to follow, let's say the container element has a class of messageList and the messages inside of it have a class of either educator or student. So what we want to do, is watch for changes on the messageList node. When a change happens, we want to check if the last child in messageList has a class of educator. If it does, we then trigger a browser notification.
I'm not gonna go into specific codes since the question is relatively vague, but in order to run code in chrome every time you go to a specific web address you can use Chrome code snippets (saves code snippets in browser memory to be run now or at a later time) and MutationObserver (triggers an action when a DOM Node mutates), check out this GoogleDev post as well.
Cheers! 🍻

How to target an element's value in a html web page which doesn't have id or class(using in a WPF c# application)

i want to get the value(in code:x) of a div element in a local html web page that belongs to a wireless network radio. this div has no id or class or attribute.how can i do that in c# Windows Presentation Foundation?(the value is not fixed).i have searched a lot in the past few days. i know that maybe the best way is to use html agility pack to locate that specific line or to index all the div in the page and find this one by it's index.this is a part of that html page:
<td rowspan="1">Link Capacity
<div class="help">header=[Link Capacity]....</div>
</td>
<td>
<div>x</div>
</td>
i just need to grab x which is a number.
also, class="help" was used many time in the page.
"Link Capacity" or "header=[Link Capacity]" are used in the code once. maybe they are the key on this solution.

Inject html after review widget loads for schema markup

My webstore uses Kudobuzz for product reviews, but our e-commerce platform (PDG) isn't supported for SEO markup data.
This widget does not support schema markup on it's own, so I want to somehow select the relevant pieces and inject the schema markup to the various divs/spans that make up the widget. One problem is figuring out how to inject code that google can parse, and another is figuring out how to make the actual selectors for this super bloated widget.
Here is a codepin of the widget and some markup data that is already on the site: http://codepen.io/anon/pen/GpddpO
Here is a link to a product page if you want to see how everything works: https://www.asseenontvhot10.com/product/2835/Professional-Leather--Vinyl-Repair-Kit
This is (roughly) the markup I'm trying to add if it helps:
<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewBody">Blah Blah it works 5 star</div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by: <span itemprop="name">Author</span></div>
<div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Stop Snore</span></div>
<div><meta itemprop="datePublished" content="2015-10-07">Date published: 10/07/2015</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"><span itemprop="ratingValue">5</span> / <span itemprop="bestRating">5</span> stars</div>
</div>
Theoretically you could write a very small amount of microdata using css :before and :after - with content but it would need all spaces and symbols converted into ISO format, eg.
#name:before { "\003cspan\2002itemprop\0022name\2033"}
#name:after { content: "\2044\003cspan003e"
even spaces need to be substitued with \2002 or an equivalent whitespace
code
should wrap this microdata to your HTML to any element called name:
<span itemprop="name">...</span>
Clearly this can only work if the widget lets you have clear ids or class names for the elements added, and it may be useless you know the type of object reviewed first (eg Book, Movie, since this needs to go at the start in the example I gave - which is incomplete). The code would need to be nested correctly so if you want further help can you edit your question with example HTML for a completed review.
Writing your own JSON-LD script at the top of the page is another option - it would be a different question (if you get stuck) but isn't embedded within the data itself
Edit
it's a good idea to test the css in a separate environment first, eg setup a jsfiddle

Showing only a few elements, others can navigate using the arrows

Good moorning.
I have got a variable $awards = array which contents some data from database from specific users. This variable extracts a set of awards to result set of users.
<div>
<span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
<a href="{$basePath}{$award['link']}">
<img src="{$basePath}{$award['preview']}"/>
</a>
</span>
</div>
However, some users have so much awards -> I would like to show first 4 awards between two arrows allowing going through the other.
Example: arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next
Could you help me how to do it? I know it's solvable through javascript but I dont know javascrip much (beginner). Or - does exist some plugin? Thank you

Incorrect reading order

I am evaluating some code that was sent to me, and I don't follow why it is happening.
[edit]: The code is generated by Lectora, an e-learning software, so nothing was done by hand. The ugly inline code cannot by shoved in a stylesheet.
[Edit 2] The buttonxxx is some feature it looks like in lectora to allow you to make invisable hotspots, sort of like an image map. I don't have the software, and the person making it isn't too tech savvy.
HTML
<p style="margin-left:0px;text-indent:0px;line-height:1.160;margin-top:0px;margin-bottom:0px;text-align:left;" >
<a href="##Action 7515" ><span class="text3708Font1" >Table of
Contents</span ></a ><a href="##Action 7515" ><span class="text3708Font2" style="background-color:transparent" >
</span ></a ></p >
<p style="margin-left:0px;text-indent:0px;line-height:1.160;margin-top:0px;margin-bottom:0px;text-align:left;" >
<span class="text3708Font3" style="background-color:transparent" >
</span ></p >
<p style="margin-left:0px;text-indent:0px;line-height:1.160;margin-top:0px;margin-bottom:0px;text-align:left;" >
<a href="##Action 3710" ><span class="text3708Font4" >Edgar's
Dilemma</span></a ><span class="text3708Font5" style="background-color:transparent" >
</span ></p >
The JavaScript that I think is applicable. There is about 530 lines of JS in the page.
button6458 = new ObjButton('button6458','table of contents',1,69,70,37,1,8,'div')
button6458.setImages('transbtn.gif',null,null,'images/')
button6458.onUp = button6458onUp
button6458.hasOnUp = true
button6458.capture=4
button6458.build()
button6459 = new ObjButton('button6459','course beginning story',2,112,67,36,1,9,'div')
button6459.setImages('transbtn.gif',null,null,'images/')
button6459.onUp = button6459onUp
button6459.hasOnUp = true
button6459.capture=4
button6459.build()
But if I navigate this using a screen reader, it is announced as:
Table of Contents [link], [link] (a space after the s in contents), Edgar’s Dilemma [link], [link] (a space character in the space between edgar & what is 508), Table of Contents (now announced as “go to table of contents [link]”), Edgar’s Dilemma (now announced as “Go to course beginning story [link]”)
Any ideas as to why the anchors are read, then the javascript would be great.
Solution:
About halfway into the source code, some JS was wrote. This makes the second set of links via the JS code block above. If we strip the junk out, the source code essentially becomes:
Table of contents
Edgar's Delimma
go to Table of contents
go toEdgar's Delimma
I haven't figured out how the is being created.
Your source code in the first block can be simplified to
<p>Table of Contents</p>
<p> </p>
<p>Edgar's Dilemma</p >
and it appears that your output is stripping the <p> </p> element because there is no content there to be read, but it's assuming that the link after the "Table of Contents" link is significant and retaining that. Because there is no text to form the link, it's doing its best.
I suspect that the link which is being announced after "Edgar's Dilemma" is similarly coded.
Quite why there should be an empty link in the code may be down to Lectora or the person who put the e-learning package together. Given the change of text style in the source code, it could be because of a font change at the end of the "Table of Contents" link — Microsoft Word can do this, when a paragraph mark retains a font setting which has been overridden for the text itself.

Categories