如何在Greasemonkey中重新調整recaptcha的大小？

Question

我想用Greasemonkey重新調整驗證碼中的文本大小以便於查看。

我該怎么做？

例如，我有這個驗證碼：

<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">
</div>

我想將第二行（從圖像樣式）的height="57"和width="300"分別更改為85和450。

將其更改為檢查工作正常，但如何使用Greasemonkey始終執行此操作？

Answer 1

這些userContent.css條目可能有效：

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

Answer 2

由於這是Greasemonkey，我假設你正在使用一個合理的最新版本的Firefox。 在這種情況下，您可以使用querySelector：

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

如果這不起作用，您可以嘗試設置img的屬性：

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

如果這不起作用，您可以嘗試同時設置框和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");
}

Answer 3

做：

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

如果recaptcha在iframe中，則@include iframe的url，而不是父級的url，但請注意，這可能會改變每個站點上recaptcha的大小，因此您可能需要檢查window.top.location window.top是所需的位置。