Writing basic greasemonkey script?

Discussion in 'Web Design and Development' started by elbirth, Nov 11, 2009.

  1. elbirth macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #1
    Perhaps there may be a simpler way to achieve this, but greasemonkey comes to mind for me and I've never written any scripts for anything before so I'm wondering if anyone can provide some help.

    Simply put, I want to be able to overlay a button on a given webpage that, when clicked, retrieves the current URL, strips out a specific part, pastes the stripped portion into a new URL pattern and sends the browser to that new location.


    For a little more detail:

    I'm wanting to implement something on the browser-side that will make life easier for me and a few other editors at work. Say a page's URL form is as follows:

    http://domain.com/folder/123456.html

    I want to be able to strip the 123456 portion (the numbers won't always be the same, of course) and then have it paste it into a new pattern, say:

    http://newdomain.com/newfolder/page=

    The 123456 would be pasted after the equal sign and I would then be taken to the page "http://newdomain.com/newfolder/page=123456"


    I've been poking around some and think perhaps the GET and POST portions here: http://wiki.greasespot.net/Code_snippets
    will be of use, but I'm at a loss for implementing this into the script

    Thanks in advance...
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Here's what you can use after the button has been pushed.
    PHP:
    var url window.location// Get current page URL
    // See if URL ends with a numbered file and html extension
    // If so, replace with new domain and location
    url url.replace(/([\d]+)\.html$/, "http://newdomain.com/newfolder/page=$1");
    // Head to new URL
    window.location url;
    I'm assuming you figured out the button placement part and were just wondering how to handle the retrieval of the URL and formulating the new one.
     
  3. elbirth thread starter macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #3
    Thanks a lot, that looks a lot simpler than I feared. I actually haven't gotten the button placement worked out yet, as this seemed like it'd be the most tedious so I was focusing on it first. I found a sample script that places a floating menu to jump you to the different sectional targets within a page, so was thinking I could somehow work with that to figure it out.

    If you (or anyone else) happens to know off hand how to place a button and have it perform that action when clicked, that'd be fantastic as well.

    Thanks!
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Try this. It has been a while since I've messed with GreaseMonkey, but this seems to get the job done, but I didn't have any pages to test the whole thing on. NOTE: In the regex in the replace function there should be a \ in front of the d and the . in front of html. It gets stripped when posting.

    PHP:
    // ==UserScript==
    // @name           Go There
    // @namespace      getter-done
    // @include        http://www.someplace.nowhere
    // ==/UserScript==

    function GoThere() {
      var 
    url window.location.href// Get current page URL
      // See if URL ends with a numbered file and html extension
      // If so, replace with new domain and location
      
    url url.replace(/^.*?([\d]+)\.html$/, "http://newdomain.com/newfolder/page=$1");
      
    // Head to new URL
      
    window.location url;
    }
    var 
    document.createElement('a');
    a.href '#';
    a.style.cssText 'position:fixed; padding:0.5em; bottom:0; right:0;'
      
    ' border:1px solid #d83; color:#fff; background:#000;'
      
    ' z-index: 1000;';
    var 
    txt document.createTextNode('Go There');
    a.addEventListener('click'GoTheretrue);
    a.appendChild(txt);
    document.getElementsByTagName('body')[0].appendChild(a);
     
  5. elbirth thread starter macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #5
    WOW, thank you so much. That works perfectly once I add in the correct URL. This will help cut down on a very tedious task at work, thanks a lot for taking the time to write that up for me!
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    No problem, it wasn't too hard except that you have to do certain things a special way for GreaseMonkey scripts, like using the addEventListener function rather than assigning a function directly to the node. Any changes you need to make, such as the color of the button should be pretty easy to spot if you know CSS. Let me know if anything breaks.
     
  7. elbirth thread starter macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #7
    Ok, so maybe I'm missing something obvious, but what if I want to make a 2nd button that would also display and would plug the number into a different URL? I can read enough CSS to where I was able to move it to a different spot on-screen (and I can change the color, but I kinda like what you put on there)

    I tried making a new instance of the "function GoThere() {}" function and just named it GoThere2 for simplicity. I added the 2nd URL there and then made a "b" variable and copied that whole area and swapped out all the "a"s for "b"s and also made a "txt2". I even tried making a "document2" in case that mattered.

    I tried a few variations of all that and ended up either with the 2 buttons directly side by side but only the 2nd one worked, or I'd see 2 buttons in different locations, but the 2nd one had no link and the 1st seemed to not work.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Can you post the code you're trying? You may be missing the event listener line.
     
  9. elbirth thread starter macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #9
    This is what I came up with... I just added this to the bottom under the code for the one you supplied and tried to make sure they used new variables and a new main function

    PHP:
    // Button 2
    function GoThere2() {
      var 
    url2 window.location.href// Get current page URL
      // See if URL ends with a numbered file and html extension
      // If so, replace with new domain and location
      
    url2 url.replace(/^.*?([\d]+).html$/, "http://www.newdomain2.com/newfolder/page=$1");
      
    // Head to new URL
      
    window.location url2;
    }
    var 
    document.createElement('b');
    b.href '#';
    b.style.cssText 'position:fixed; padding:0.3em; top:14em; left:0em;'
      
    ' border:1px solid #d83; color:#fff; background:#000;'
      
    ' z-index:10;';
    var 
    txt2 document.createTextNode('Go Elsewhere');
    b.addEventListener('click'GoThere2true);
    b.appendChild(txt2);
    document.getElementsByTagName('body')[0].appendChild(b);
    (of course, with the \ in front of the d in the url.replace function, since this strips it out like you mentioned.)

    This is the result it gives me when the page loads:

    [​IMG]

    The 2nd button isn't linked, but the first one works as it should
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    You missed one url2 from url on the replace line.

    PHP:
    url2 url.replace....
    url2 url2.replace ...
    Also, on the var b line, the element created needs to stay as 'a' because it's a tag name, e.g., <a href=...></a>.
    PHP:
    var document.createElement('a'); 
     
  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    In your GoThere2 function url2 = url.replace should be url2 = url2.replace followed by the rest of your code and use "a" for createEelement as that refers to the anchor tag.
     
  12. elbirth thread starter macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #12
    aha, I knew it was something simple I had to be overlooking.

    Not sure I quite understand why the var line's createElement has to remain "a" instead of "b", but that's the sort of thing as to why I can't wrap my mind around much over very basic programming.

    In any event, it works correctly now, thanks again!
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    The document.createElement('a') is creating a <a></a> tag. With 'b' in there it was creating a bold tag, which isn't a link of course. The variable name could have been anything I just used var a because it was simple.
     
  14. elbirth thread starter macrumors 65816

    Joined:
    Jan 19, 2006
    Location:
    North Carolina, US
    #14
    oh, I get it, I was just thrown off by the use the variable name "a", then. I was thinking it was calling that variable instead of "a" actually being a method that performed another task altogether.
    Thanks for the explanation
     

Share This Page