Greasy Fork

Hello there,

I am currently working on a Greasemonkey script for a specific website, and I could really use some guidance from the community.

The goal of my script is to modify certain elements on the website to improve its usability.

Specifically, I am trying to change the appearance of buttons and add additional functionality to the navigation menu.

I have made some progress with the script, but I have run into a few roadblocks that I am struggling to overcome. For example, I am having trouble targeting the correct elements in the DOM, and I am not sure how to implement certain features using JavaScript.

I have taken help from this: https://greasyfork.org/en/discussions/requests/55761-request-replace-a-devops-specific-image-on-a-site

If anyone has experience with Greasemonkey scripts and would be willing to lend a hand, I would greatly appreciate it.

I'm also open to any general tips or resources that you think might be helpful for someone working on a similar project.

for any help you can write me on discord: doctor8296 :3

Hi Roberrtt, I don't know what's your current level of Javascript knowledge. If you want to share more details here about your knowledge and your project that would be useful.
Starting with the problem of targeting the right elements, the most common way to do this is by using one of the getElement(s)By*** methods, i.e.:
getElementsByTagName()
getElementsByName()
getElementsByClassName()
getElementById()

For example, if you write var a=document.body.getElementsByClassName("exampleClass") the code will search in the document body for any element that has "exampleClass" in the "class" attribute, and will "save" them into the "a" variable.
getElementsByTagName(), getElementsByName(), and getElementsByClassName() all return a list of elements, while getElementById() will return the first element with the specified ID (in HTML, the good practice would be that each ID is unique in a document).

Another useful way to get a specific element, especially when the document is using a complex structure, is to use the querySelector() and querySelectorAll() methods (which respectively get the first or all the elements corresponding to the given query).
So how to write a query? You can use and combine the CSS Selectors to get the element you want.
While it's harder to use, it can be useful as it can select the elements considering any attribute, not just class, name or ID, and it can take into account the relation between various element.
For example, var b=document.body.querySelector("#exampleID > button") will get the first button which is contained into the element which ID is "exampleID".

If you have some specific questions, feel free to ask here, otherwise the best sites to look for explainations on how to use Javascript, HTML and CSS are:
https://www.w3schools.com/ and https://developer.mozilla.org/en-US/docs/Web