Introduction to Greasemonkey

Поділитися
Вставка
  • Опубліковано 18 лис 2024

КОМЕНТАРІ • 108

  • @ExaoSS
    @ExaoSS 7 років тому +24

    Man if you know how much I hate commenting on youtube... But this tutorial made me go through the hustle of using incognito window and signing in to say thank you very much indeed sir!. I was trying to find a clear introduction to greasemoneky and you saved a lot of time. I hope you build on this since no one seems to care enough to do step by step tutorial .

    • @NERDfirst
      @NERDfirst  7 років тому +4

      Hello and thank you very much for your comment! Very happy to be of help! I see quite a bit of demand for greasemonkey tutorials, so I'll certainly look for opportunities to expand upon this!

    • @ExaoSS
      @ExaoSS 7 років тому

      would be great if you can tap on the issue of dynamic pages or pages that don't load the content directly, because dealing with that was a pain in the back.

    • @NERDfirst
      @NERDfirst  7 років тому +1

      I know what you mean! It's something I've been struggling with a lot as well. Thing is, I'm not even sure if my strategies are correct (I actually poll pages at an interval until the component I am looking for appears). I'm sure there's a more elegant way than that!

  • @zyptoskid
    @zyptoskid 4 роки тому +3

    This is very very VERY well-explained. You go over the fundamentals well and without dragging things instead of saying "click this and do that".
    Thank you so much. You're a talented teacher.
    I've been wanting to start with js but always felt like it's a mess compared to the stuff I usually work with (Haskell and co.). I always preferred transpilation than to get my hands dirty (greasy?) with it. You've just given me a thread end.

    • @NERDfirst
      @NERDfirst  4 роки тому +1

      Hello and thank you very much for your comment! It's always difficult to balance a certain level of abstraction with the amount of nitty gritty details. Glad I found a good balance in this video =)

  • @richardillner6152
    @richardillner6152 7 місяців тому

    Excellent! Very clear and understandable explanation about how to begin with Greasemonkey

    • @NERDfirst
      @NERDfirst  7 місяців тому

      Hello and thank you very much for your comment! Glad you liked the video =)

  • @deswpNET
    @deswpNET 8 років тому +2

    You can also use document.querySelectorAll(".content article") to select elements using the CSS selector syntax. It's my go-to method of selecting elements after getElementById().
    For styling only I'd highly suggest the Stylish Add-On. It allows to inject CSS specifically into the page. The userstyle will be loaded at the start of the page and is faster. Userscripts normally are loaded after the initial HTML has been loaded.
    I'd like to point out that when using jQuery, it's best to use the version the website provides. It's possible to require a certain jQuery version (or any .js file really) even if the page already has jQuery by default. That can lead to conflicts and your userscript might not work properly.

    • @NERDfirst
      @NERDfirst  8 років тому +2

      +Konsument Hello and thank you very much for sharing! querySelectorAll is very useful, I didn't know about that one!
      I will definitely take a closer look at Stylish eventually. Seems like an interesting complement to GM.
      Interesting point about the conflict. I was under the impression that GM scripts ran in a sandbox, so the scripts they import doesn't mix with the scripts on the webpage. But I do see many reports on this issue (including a plethora of workarounds!), so I'm glad that solutions are readily available.

  • @Box-of-hats
    @Box-of-hats 8 років тому +2

    Some really cool stuff here. I've never been interested in javascript before but I think I'll look more into it now. Thanks for the great tutorial

    • @NERDfirst
      @NERDfirst  8 років тому

      +Box-Of-Hats Hello and thank you for your comment! Really glad you liked the video, and it's awesome to hear that you'll be looking more into JS! I certainly believe it's worth your while =)

  • @DustinMemoli
    @DustinMemoli Рік тому

    Like 9000.
    This is so powerful and has so much potential.
    Thank you!

    • @NERDfirst
      @NERDfirst  Рік тому

      You're welcome! Very happy to be of help =)

  • @RichAtVNS
    @RichAtVNS 5 років тому

    I just want tosay, this an absolutely great video, I been using imacros for years, done alot of .net, some javascript, jquery and scrapped pages. had I known this was so easy I would have used greasemonkey 10 years ago..... You laid it out perfectly... of course 10 years ago the firefly wasn't built into mozilla it was an add on...
    But I really appreciate the concise examples, bullet points, closeups of what you were typing and the exact info!!!!

    • @NERDfirst
      @NERDfirst  5 років тому

      Hello and thank you very much for your comment! Very happy to be of help =)

    • @RichAtVNS
      @RichAtVNS 5 років тому

      @@NERDfirst I have a MS in Compiler Design & Computer Graaphics, Did alot of Casetools and languages. Obviously I've had to Teach in the real world. And I have to say after watching a few of your videos, you really have a knack for this. You give real simple to understand examples that have use. And explain things succinctly.
      Omly 2 suggestions for the future...
      1) If using a console app like the debugger in the future, in your video move it up a little so that when playing back the video and someone pauses it, the controls and growbar are not obscuring it....
      2) Any sample code and commands you use or type through the whole session if possible should be in an attached text file(s)....
      This would make it easier for newbies and hardcore programmers alike.
      Just my 2 cents....
      Big fan!

    • @NERDfirst
      @NERDfirst  5 років тому

      ​@@RichAtVNS Thank you very much for your kind words! Always nice to get feedback from a professional in the industry.
      The first point is definitely something I need to remind myself about. Stuff at the bottom of the screen can get obscured by those using subtitles as well so it's an all-round accessibility hazard. Usually I churn these videos out so fast that "anything goes", but this one is something I should really remember.
      As for your second point, that'll definitely be good to have! At least for code (where it's significant), I already do make it available. Console commands, not as much since I take it that it's something you'd get out of the video. Not sure if I can devote the time to it I'm afraid, but definitely something I'll keep in mind.

  • @crucru4000
    @crucru4000 2 роки тому

    'A Greasemonkey' is an English term for someone who tinkers in their garage with cars or motorbikes and as such always has grease on their hands and clothes etc.

    • @NERDfirst
      @NERDfirst  2 роки тому +1

      Hello and thank you very much for your comment! Oh, this is interesting background I never knew. Makes a lot of sense in context, too!

  • @sc.9430
    @sc.9430 4 роки тому

    Very useful intro. Thank you.
    Is it possible to do finding on site A and changing on site B?
    I want to make a report copying data from site A, B and C and gather them on site D? If tampermonkey cannot do that, is there any other way to do it?

    • @NERDfirst
      @NERDfirst  4 роки тому +1

      Hello and thank you for your comment! What you're describing sounds a lot more complex than what Greasemonkey and Tampermonkey are designed to do. Remember, the whole point of these is to mess with how _one_ page _appears_ to you.
      The "most correct" way of doing this would be to pick up a standalone programming language (if you already know JavaScript, consider using Node), and then code it to pull the information from the sites and generate a new output site.

  • @keyurwaghela26
    @keyurwaghela26 6 років тому +1

    Awesome explanation keep it up sir make more videos like this
    We like this type is interesting topic
    I haven't learned java but I understood correctly about this topic because of your easy explanation

    • @NERDfirst
      @NERDfirst  6 років тому

      Hello and thank you very much for your comment! Glad you found the video useful!

  • @WaschyNumber1
    @WaschyNumber1 3 роки тому

    Hello
    Is it difficult to do a script for transforming a webside in a printer friendly document, or transform it in a png format for downloading without spacing problems for ptinting ect. 🤔?

    • @NERDfirst
      @NERDfirst  3 роки тому +1

      Hello and thank you for your comment! I would say that a general solution for this is extremely difficult, bordering on impossible, since for this to work you'll need to write a bit of code that can contextually understand where the important content and graphics are, as well as how they're associated with each other. What makes this hard is that every site looks different, and is written and organized differently under the hood as well.
      Having said that, browsers like Firefox do provide a reader mode, which works for many but not all sites. You can look at the source code for that to gather some insight as to how the professionals approach a problem like this.

  • @daxx10
    @daxx10 6 років тому

    A really good demonstration. I appreciate your help.

    • @NERDfirst
      @NERDfirst  6 років тому +1

      That's great to hear! Very happy to be of help :)

  • @fUjiMaNia
    @fUjiMaNia 5 років тому

    Great video. Can greasemonkey be used to find&replace images displayed on a live website in realtime? say I'm looking at a map with cars being displayed as small .PNG files and I would like to replace .PNG with my own set of images.

    • @NERDfirst
      @NERDfirst  5 років тому +1

      Hello and thank you for your comment! It is certainly possible, though whether this is easy to do depends on how the page is structured. In the best case, the images would be given a specific class. Then you simply need to select everything from the class and replace the "src" attribute.

  • @peter_castle
    @peter_castle 5 років тому +1

    great video, a lot of learning especially for newbies to web dev like me!

    • @NERDfirst
      @NERDfirst  5 років тому

      Hello and thank you very much for your comment! Very happy to be of help =)

  • @coolworx
    @coolworx 7 місяців тому

    Grease Monkey used to be a slang for auto mechanic.

    • @NERDfirst
      @NERDfirst  7 місяців тому

      Hello and thank you for your comment! So I've been told, that's not something that comes up around me so I was completely unaware of it!

  • @Athena1
    @Athena1 6 років тому

    Using your example in the video, how could I add a new box?

    • @NERDfirst
      @NERDfirst  6 років тому

      Hello and thank you for your comment! If you want to add content, you'll need to generally use the following steps:
      1. var elem = document.createElement(tagName) // This creates a new element to add to DOM
      2. elem.innerHTML = "..." // Build your new element somehow
      3. container.appendChild(elem) // Attach your new element to some container on the page

  • @best_protein_dz
    @best_protein_dz 6 років тому

    please i need your help for make a script for disable security key for a website of appoitments

    • @NERDfirst
      @NERDfirst  6 років тому

      Hello and thank you for your comment! You're going to have to be a little bit more specific!

  • @nemigam223
    @nemigam223 4 роки тому

    Nicely presented! Thank you!

    • @NERDfirst
      @NERDfirst  4 роки тому

      You're welcome! Very happy to be of help =)

  • @jezdue5948
    @jezdue5948 3 роки тому

    i need help when you install a script and there are bunch of codes where did they get that what is that means?

    • @jezdue5948
      @jezdue5948 3 роки тому

      how did they make their own codes??

    • @NERDfirst
      @NERDfirst  3 роки тому

      Hello and thank you for your comment! You're going to have to be a lot more specific than that.
      I mean, even in this video, we write a fair bit of code.

    • @jezdue5948
      @jezdue5948 3 роки тому

      @@NERDfirst Oh ok

  • @mamazu1995
    @mamazu1995 8 років тому

    Great video, just one thing that you should have made a little clearer is that you just change the display of the web page and not the real website. For example, the hidden div is still there just not visible.

    • @NERDfirst
      @NERDfirst  8 років тому +1

      +Max mamazu Hello and thank you very much for your comment! I could've sworn I mentioned that at one point, but it's possible I might have cut it out... This video went through quite a few major revisions and honestly I'm not even sure what's in it anymore =P
      But yes of course, you are mostly correct - Actually you _are_ editing the page, making actual changes to its content, especially if you use functions like innerHTML. However, these changes are made to a temporary copy of the site created by your browser, and don't change up the actual web page, which is hosted on another machine out there. I should probably add an annotation to clarify this.
      *EDIT*: I have deleted a statement in which I said the elements were removed - That is incorrect, as changing the style of the element will not remove it from the code, even of the working copy. Sorry for the mistake!

    • @deswpNET
      @deswpNET 8 років тому +2

      +lcc0612 No, it won't be removed just by setting it's display property to none. This will only add "display:none" to the style attribute of the given element. To remove it entirely you'd have to use element.remove() or change the innerHTML of the parent element, to name a few methods.

    • @NERDfirst
      @NERDfirst  8 років тому +1

      +Konsument Hello and thank you for your comment! I stand corrected - I confused this with the discussion on "visibility:hidden" vs "display:none" (the former makes an object disappear but it still takes up space), I had misunderstood "removed" to mean the effect performed by the latter to be removing the element from the page. I will correct my previous comment.

  • @iperpituallocomotionz7751
    @iperpituallocomotionz7751 6 років тому

    well explained great info and a wonderful channel.... I wish you can go deep in this topic like changing places of an object like google homepage search button or making an auto click submit when choosing something from a drop-down menu this is gonna save alot of time...Glad I found this channel.subed and liked

    • @NERDfirst
      @NERDfirst  6 років тому

      Hello and thank you very much for your comment! All pretty good suggestions! Though actually the basic techniques for finding things and manipulating them have been covered in this video. I'll see what else I can do! I probably can't give too many hands-on examples specific to any existing service for copyright fears - Since I would have to capture their interface and show it a lot!

  • @abdulaleemsial3145
    @abdulaleemsial3145 7 років тому

    Could you tell me how can I permently save a change when ever I refresh a page from any pc

    • @NERDfirst
      @NERDfirst  7 років тому

      Hello and thank you for your comment! It sounds like the only way you can get this to work is to make a modification onto the page itself, I'm afraid! Greasemonkey can't help you with that.

  • @dhex2964
    @dhex2964 8 років тому

    So Greasemonkey/Tapermonkey scripts write scripts into the console?

    • @NERDfirst
      @NERDfirst  8 років тому

      Hello and thank you for your comment! Actually, no. Greasemonkey scripts are executed in their own environment for security reasons. While most of the time, this doesn't feel too different from just running code from the console, you may find some subtle differences in terms of what you can or cannot do, as well as _when_ certain bits of code execute.

  • @lowyaknow
    @lowyaknow Рік тому

    Can you make a video on how to do a copy button with Greasemonkey?

    • @NERDfirst
      @NERDfirst  Рік тому

      Hello and thank you for your comment! Your specifications here aren't very clear, but if you mean copying to clipboard, you can refer to the following tutorial for the HTML/JS of it. Simply use Greasemonkey to inject the button described onto the page.
      www.w3schools.com/howto/howto_js_copy_clipboard.asp

  • @jaxonblade1659
    @jaxonblade1659 5 років тому

    Very interesting! I don't have any idea about programing on HTML, CSS or JS but i want study about it. It looks impressive.
    Anyway, i have a little question.
    For example: Imagine that you are on a UA-cam web page.
    ¿Could be possible make a script that change the order of the coments from the people wich type on the blanks below the videos? Might be organized from "The most comment" to "The less comment"?
    Even, "most liked" to the "less liked".
    (Sorry for my english.... i know.. is not the best :P)

    • @NERDfirst
      @NERDfirst  5 років тому

      Hello and thank you for your comment! That sounds very much possible, though I can also imagine many difficulties that would be in your way. You'll have to understand the structure of the page (which some sites like instagram deliberately obfuscate - UA-cam seems nicer with this). You'll also have to play nice with the scripts they have (eg. Infinite scrolling logic - You'll have to load all the comments before you begin to sort). So it's possible but it'll take a good amount of time.

  • @KetulPoshia
    @KetulPoshia 8 років тому +3

    Thank you so much, this helped a lot!

    • @NERDfirst
      @NERDfirst  8 років тому

      You're welcome! Very happy to be of help!

  • @Dipenparmar12
    @Dipenparmar12 5 років тому +1

    You are going very good, But please focus on topic instead of html or css

    • @NERDfirst
      @NERDfirst  5 років тому +3

      Hello and thank you for your comment! Unfortunately Greasemonkey _is_ primarily HTML/CSS/JS! There really isn't a whole lot that is specific to greasemonkey, so the inclusion of web programming languages in this video is a deliberate choice.

  • @KillerkoUK
    @KillerkoUK 5 років тому

    Nice.. is there part 2 or that's it?

    • @NERDfirst
      @NERDfirst  5 років тому +1

      Hello and thank you very much for your comment! This is it I'm afraid! Greasemonkey really isn't much more than a fancy way to invoke JavaScript. Everything else is web programming.

    • @KillerkoUK
      @KillerkoUK 5 років тому

      no problem.. I guess I will have to find a java script tutorial somewhere else :-) but your introduction was very useful indeed.

  • @spellbound153
    @spellbound153 8 років тому

    how do you use it to remove fb activity?

    • @NERDfirst
      @NERDfirst  8 років тому

      +spellbound153 Hello and thank you for your comment! Sorry but I'm gonna need a little more information about what exactly you want to do before I can point you in the right direction!
      Of course, if your concerns are privacy and security, I would honestly say you should use something other than a greasemonkey script. Look for a browser extension like Privacy Badger instead.

    • @Squee7e
      @Squee7e 7 років тому

      spellbound153 use NoScript and only white list services you want to use :)

  • @georel21
    @georel21 7 років тому

    how do a get a value from a different page? is it possible?

    • @NERDfirst
      @NERDfirst  7 років тому

      Hello and thank you for your comment! Yes, it's possible, though you'll probably have to jump through some hoops to get there.
      What you have to do is to make an AJAX call to the other page. That's basically like loading up the page, but sending it to your script instead of for display in browser. Since this process takes a bit of time, the results are returned to a callback function.
      From there, what you've received back is all the HTML and scripts of that page, so you're going to have to use string manipulation techniques to pick out the information you want.
      The accepted answer of this stackoverflow question shows you a code snippet of this in action: stackoverflow.com/questions/42591928/greasemonkey-ajax-request-from-a-different-domain

    • @georel21
      @georel21 7 років тому

      that sounds pretty clear to me. thank you so much. since i just started learning javascript (from you), i think it will take some time for me to figure it out completely. i'll get back to you when i get it done or when i have some quuestions. thanks you!

    • @georel21
      @georel21 7 років тому

      i'm back! (so quickly). :( although i got the idea clearly. code is not so clear for me. i'm not giving up yet but i thought i should tell you my situation coz maybe you have an idea on how to make me and others understand it. thank you

    • @NERDfirst
      @NERDfirst  7 років тому

      Heh, that was indeed fast. Which part do you not understand?

    • @georel21
      @georel21 7 років тому

      what i understand:
      1. the request runs internally. and it reads through the whole page.
      2. it gets (almost all) information. so i still need to sort them out.
      what i don't understand:
      1. the given example is probably too generic for me. i don't know if the tripple dot (...) is even part of the code or i should fill it in.
      2. where will all the data be stored?
      3. can i use the javascript that you thought us to manipulate the gathrered data?
      4. whether it's a yes or a no, the last question is: can please give me an example on how to call/use those data.
      thank you so much!

  • @EnjelMooshies
    @EnjelMooshies 8 років тому

    i gained more knowledge on howto use this addon it really helped thanks, and how do i can i use this on chrome?

    • @NERDfirst
      @NERDfirst  8 років тому +1

      Hello and thank you very much for your comment! Happy to be of help!
      Google Chrome users should use Tampermonkey, a Chrome extension (chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en)

    • @EnjelMooshies
      @EnjelMooshies 8 років тому

      then how do i fix the error 840

    • @NERDfirst
      @NERDfirst  8 років тому

      Hello again! Could you elaborate more on "Error 840"? What were the actions that led up to this error?
      (PS. Also if this is a Tampermonkey issue, I may be unable to help, as I only use Greasemonkey!)

  • @eyeship6037
    @eyeship6037 4 роки тому

    you sound like a scottish guy undercover

    • @NERDfirst
      @NERDfirst  4 роки тому

      Heh! I'll take that as a compliment =D

  • @kc9kel
    @kc9kel 5 років тому

    ...erm...I think 'idx' is a misnomer; wouldn't 'offset' be more acciurate? 'idx' usually means 'from 1 to N'....

    • @NERDfirst
      @NERDfirst  5 років тому +1

      Hello and thank you for your comment! Not at all, "idx", which is short for index, means "position" in the context of an array or other position-based data structure. Please do clarify if this doesn't address your doubt.

  • @shipewolf4040
    @shipewolf4040 7 років тому +1

    Nice video, thanks..

    • @NERDfirst
      @NERDfirst  7 років тому +1

      You're welcome! Glad to be of help =)

  • @passord1d493
    @passord1d493 4 роки тому +1

    tnx

    • @NERDfirst
      @NERDfirst  4 роки тому

      You're welcome! Glad to be of help =)

  • @kevinw6237
    @kevinw6237 6 років тому

    very nice!

    • @NERDfirst
      @NERDfirst  6 років тому

      Thank you very much! Glad you liked the video =)

  • @harishaggarwal6392
    @harishaggarwal6392 6 років тому

    Obuman

  • @trollinginc.8322
    @trollinginc.8322 4 роки тому +1

    There’s always a Asian better than u

  • @JJLabajo
    @JJLabajo 6 років тому +1

    90% is just about crappy programming, yet it's entitled - "Introduction to GREASEMONKEY". You should change it to "How to learn HTML,CSS and JS.. and li'l greasemonkey". This video sucks, well, atleast for programmers.

    • @NERDfirst
      @NERDfirst  6 років тому +2

      Hello and thank you very much for your comment! I'm sorry you've had a bad experience.
      Unfortunately that's greasemonkey for you! It's honestly just JavaScript, and the only thing special about it is how greasemonkey injects it into web pages. If you know web programming, you basically know 99% of greasemonkey.

    • @JJLabajo
      @JJLabajo 6 років тому +1

      @@NERDfirst "Intro to greasemonkey" i thought it was about knowing how to start, how to inject and other stuff that are necessary to run the thing. Make some title that is describing exactly what you're doing in your vids.

    • @NERDfirst
      @NERDfirst  6 років тому +2

      Hello again! While I can see where you're coming from, I'm afraid I'm unable to imagine creating any greasemonkey tutorial that avoids talking about actual web programming code. For example, the three points you've brought up could easily be answered by saying "download the extension, and use JavaScript". There just isn't sufficient value-add.
      At the same time, I would argue that the title is accurate. Every step shown is important to common workflows with greasemonkey (pinpointing elements and manipulating them).
      Again, I apologize if you've had a bad experience with this video. I hope you understand that the title of the video accurately reflects my intent in creating this video, and thus I have opted to keep it as it is.