How can I resize the recaptcha in Greasemonkey?

Question

I want to re size the text from the captcha to be easier to see, with Greasemonkey.

How can I do it?

For example, I have this captcha:

<div id="recaptcha_image" style="width: 300px; height: 57px; ">
  <img style="display:block;" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VuuqeICMpU36GlHCSchBzERwiDzTH4A1RHobtEpbbSK5lWC47EVkgeuF_ause8bnYTHGhjRr_GFiVMh9e4sZFXIBlv4-vcY7WXNjtBHhVmIl2Z5tqK_CY5hRZjtr-MWDUrBOr7mQE0ZqfU8XeeUeXLM5cxcwEQ"&gt;
</div>

I want to change the height="57" and the width="300" from the second line (from the image style) to 85 and 450 respectively.

Changing it into the inspect works correctly, but how can I do to do it always with Greasemonkey?

Answer 1

Do:

var img = document.evaluate("//div[@id='recaptcha_image']/img", document, null, 9, null).singleNodeValue;
img.setAttribute('width', '85');
img.setAttribute('height', '450');

If the recaptcha is in an iframe, then @include the iframe's url, and not the parent's url, but note that this'll probably change the size of recaptcha's on every site, so you may want to check that window.top.location for window.top is the desired location.

Answer 2

Since this is Greasemonkey, I'm going to assume you're using a reasonably up-to-date version of Firefox. In which case, you might be able to use querySelector:

var query = document.querySelector("#recaptcha_image > img");
if (query) {
    query.style.width = "450px !important";
    query.style.height = "85px !important";
}

If that doesn't work, you can try setting the img's attributes instead:

var query = document.querySelector("#recaptcha_image > img");
if (query) {
    query.setAttribute("width", "450");
    query.setAttribute("height", "85");
}

If that doesn't work, you can try setting both the box and the img:

var element = document.getElementById("recaptcha_image");
if (element) {
    element.style.width = "450px !important";
    element.style.height = "85px !important";
}

var query = element.querySelector("img");
if (query) {
    query.setAttribute("width", "450");
    query.setAttribute("height", "85");
}