CODEWITHSUNDEEP
jquerygreasemonkey
ProfK
ProfK

Reputation: 51064

Using jQuery in a GreaseMonkey script for GMail

I'm trying to write a Greasemonkey script to change colours on the default GMail UI, using jQuery to select the element I want to change. However, I'm having no end of difficulty getting thing working/debugged. When I eventually corrected my "@requires" url, I found it very hard to identify which div, in a morass of billions of nested divs, is actually presenting the colour I want to change. The majority of them are decorated with only one class, .nH,

It's the blue bar above the inbox I want to change.

I'm not seeing any errors anymore, but my GM_Log call seems to be ignored, and jQuery is not defined. I suspect the latter problem is that GreaseMonkey has unloaded jQuery once my user script has executed. Am I even close? It would be nice if I could test selectors in the console window.

Upvotes: 1

Views: 1252

Answers (5)

Billy
Billy

Reputation: 1253

If you copy and paste the following into the javascript console in Chrome you will see an example of loading jQuery and executing a query. Hopefully that helps but honestly, Googles HTML/CSS is a moving target and anything you make may end up unstable.

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');

Upvotes: 2

yodog
yodog

Reputation: 6232

Could you post your code, so we can see what may be not working?

Also, here is a link to one of my scripts that uses JQuery, so you can look at the source to check how to do it.

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

PS: If you reinstall the script, the @require is downloaded again. I tested it.

Upvotes: 0

mynameisnotallowed
mynameisnotallowed

Reputation: 483

As to how to use jQuery in Greasemonkey:

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

More info at: http://wiki.greasespot.net/Metadata_Block#.40require

Or to use jQuery in Chrome: http://erikvold.com/blog/index.cfm/2010/6/14/using-jquery-with-a-user-script

Upvotes: -1

Andrey
Andrey

Reputation: 65

Perfect extension to embed jQuery into Chrome Console as simple as you can imagine. This extension also indocates if jQuery has been already embeded into page.

This extension used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by "Ctrl+Shift+j").

To embed jQuery into selected tab click on extention button.

LINK to extension: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc

Upvotes: 0

stimms
stimms

Reputation: 44064

For debugging purposes you can load jquery into the page using jquerify. This should allow you to figure out the selector needed in the GM query. You might also try out selector gadget which is an easy tool for coming up with rules to select elements on a page.

Upvotes: 4

Related Questions