Writing basic greasemonkey script?

[elbirth]

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...

 

[angelwatt]

Here's what you can use after the button has been pushed.

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.

 

[elbirth]

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!

 

[angelwatt]

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.

// ==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 a = 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', GoThere, true);
a.appendChild(txt);
document.getElementsByTagName('body')[0].appendChild(a);

 

[elbirth]

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!

 

[angelwatt]

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.

 

[elbirth]

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.

 

[angelwatt]

Can you post the code you're trying? You may be missing the event listener line.

 

[elbirth]

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

// 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 b = 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', GoThere2, true);
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:

The 2nd button isn't linked, but the first one works as it should

 

[angelwatt]

You missed one url2 from url on the replace line.

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>.

var b = document.createElement('a');

 

[SrWebDeveloper]

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.

 

[elbirth]

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!

 

[angelwatt]

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.

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.

 

[elbirth]

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.

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