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="">
</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?

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./recaptcha/api/image?c=03AHJ_VuuqeICMpU36GlHCSchBzERwiDzTH4A1RHobtEpbbSK5lWC47EVkgeuF_ause8bnYTHGhjRr_GFiVMh9e4sZFXIBlv4-vcY7WXNjtBHhVmIl2Z5tqK_CY5hRZjtr-MWDUrBOr7mQE0ZqfU8XeeUeXLM5cxcwEQ">
</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?

• javascript
• greasemonkey
• captcha

• you cannot use document.getElementById('reaptcha_image').style.height="85px"; ?? – mplungjan Commented Jul 21, 2010 at 17:39
• note if you copied and pasted what mplungjan wrote it won't work it should be document.getElementById('recaptcha_image').style.height="85px"; The c was missing in the recapta part of the name. – qw3n Commented Jul 21, 2010 at 18:07
• this mand only enlarge the box of the captcha, and not the text itself – Bruno 'Shady' Commented Jul 21, 2010 at 20:17
• 1 Use document.getElementById('recaptcha_image').firstChild.style.height="85px"; to change the size of the image (recaptcha "text") itself. Also, as recaptcha's are in an iframe, if you are accessing it from the parent frame you will need to use recaptchIframe.document.getElementById('recaptcha_image').firstChild.style.height="85px"; where recaptchIframe is the iframe of the recaptcha. – Adam Commented Jul 21, 2010 at 23:17

3 Answers 3

These userContent.css entries might work:

div#recaptcha_image,
div#recaptcha_image > img {
  width: 450px !important;
  height: 85px !important;
}

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");
}

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.