在 GMail 的 GreaseMonkey 脚本中使用 jQuery答案

【问题标题】：Using jQuery in a GreaseMonkey script for GMail在 GMail 的 GreaseMonkey 脚本中使用 jQuery
【发布时间】：2012-04-07 04:17:07
【问题描述】：

我正在尝试编写一个 Greasemonkey 脚本来更改默认 GMail UI 上的颜色，使用 jQuery 来选择我想要更改的元素。但是，我在让事情正常工作/调试时遇到了无穷无尽的困难。当我最终更正了我的“@requires”网址时，我发现很难确定在数十亿嵌套 div 的泥沼中哪个 div 实际上呈现了我想要更改的颜色。它们中的大多数只装饰了一个类，.nH，

这是我要更改的收件箱上方的蓝色条。

我不再看到任何错误，但我的 GM_Log 调用似乎被忽略了，并且 jQuery 没有定义。我怀疑后一个问题是一旦我的用户脚本执行完毕，GreaseMonkey 已经卸载了 jQuery。我什至接近吗？如果我能在控制台窗口中测试选择器就好了。

【问题讨论】：

标签： jquery greasemonkey

【解决方案1】：

出于调试目的，您可以使用jquerify 将jquery 加载到页面中。这应该允许您找出 GM 查询中所需的选择器。你也可以试试selector gadget，这是一个简单的工具，可以用来制定规则来选择页面上的元素。

【讨论】：

不幸的是，SelectorGadget 似乎无法在 mail.google.com 上运行，但当然，Gmail 完全是另一种动物。
谢谢。实际上我昨晚很晚才发现 jQuerify，但是当我尝试用 $("div.qm") 选择一个 "div class='qm'" 并且没有得到任何回报时，我放弃了。 :-(
可能你没有得到标签，因为谷歌使用 iframe。所以，先获取iframe的内容窗口，再获取对应的标签。
如果你使用 Firefox + Firebug，你应该安装 FireQuery（一个 Firebug 插件），它包括 jqueryfy（和其他强大的功能）。

【解决方案2】：

如果您将以下内容复制并粘贴到 Chrome 的 javascript 控制台中，您将看到加载 jQuery 并执行查询的示例。希望这会有所帮助，但老实说，Google 的 HTML/CSS 是一个不断变化的目标，您所做的任何事情最终都可能不稳定。

var scr = document.createElement('script');
scr.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
document.getElementsByTagName('body')[0].appendChild(scr);

// wait for the script to load before doing this line
jQuery(document.getElementById('canvas_frame').contentDocument).find('.nU a.n0');

【讨论】：

【解决方案3】：

将 jQuery 嵌入 Chrome 控制台的完美扩展，就像您想象的那样简单。如果 jQuery 已经嵌入到页面中，这个扩展也会提示。

此扩展用于将 jQuery 嵌入到您想要的任何页面中。它允许在控制台shell中使用jQuery（您可以通过“Ctrl+Shift+j”调用Chrome控制台）。

要将 jQuery 嵌入到选定的选项卡中，请单击扩展按钮。

LINK 到扩展： https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc

【讨论】：

【解决方案4】：

您能否发布您的代码，以便我们查看可能无法正常工作的地方？

另外，这里是我使用 JQuery 的脚本之一的链接，因此您可以查看源代码以检查如何操作。

http://userscripts.org/scripts/show/77701

PS：如果你重新安装脚本，@require 会再次下载。我测试过了。

【讨论】：

【解决方案5】：

关于如何在 Greasemonkey 中使用 jQuery：

// @require http://www.example.com/example.js

更多信息请访问：http://wiki.greasespot.net/Metadata_Block#.40require

或者在 Chrome 中使用 jQuery：http://erikvold.com/blog/index.cfm/2010/6/14/using-jquery-with-a-user-script

【讨论】：