Using jQuery in a GreaseMonkey script for GMail

Question

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.

Answer 1

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.

Answer 2

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